Fabric.js Clip Canvas (or object group) To Polygon

Question 1

I have a canvas drawn in Fabric.js that i am adding a group of rectangles to, i want to limit the edges of those rectangles as a group to not go outside a certain area.

Imagine making a stripy t-shirt, the stripes are make by using a series of rectangles and i need to keep them to the shape of the t-shirt.

I think its better to clip the entire canvas to the shape of the t shirt, so anything i add to it remains within the t-shirt but i am stuck. So far i am only clip to basic circles and rectangles.

Thanks

Question 2

You can just render a shape inside canvas.clipTo :)

I just loaded a random SVG shape in kitchensink and did this:

var shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
  shape.render(ctx);
};

As you can see, entire canvas is now clipped by that SVG shape.

Question 3

The IFRAME element is part of the upcoming HTML5 standard. Also, HTML5 is developed by the major browser vendors out there (Mozilla, Opera, Safari, IE), that basically makes a guarantee that we will have an IFRAME element in the foreseeable future. Some of them have support for some HTML5 elements already, like AUDIO and VIDEO and some new JavaScript APIs.

It's also true that the OBJECT element is in the draft, but that's because IFRAME and OBJECT will have different purposes. IFRAMES are mainly designed for sandboxing web applications.

So, my advise is to use IFRAME instead of OBJECT.

Question 4

You can use IText like this:

canvas.add(new fabric.IText('Tap and Type', {
  fontFamily: 'arial black',
  left: 100,
  top: 100,
}));

And the full code:

var canvas = new fabric.Canvas('canvas');

document.getElementById('file').addEventListener("change", function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  console.log("reader   " + reader);
  reader.onload = function (f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function (img) {
      var oImg = img.set({left: 70, top: 100, width: 250, height: 200, angle: 0}).scale(0.9);
      canvas.add(oImg).renderAll();
      canvas.setActiveObject(oImg);  
    });
  };
  reader.readAsDataURL(file);
});

$('#fill').change(function(){
  var obj = canvas.getActiveObject();

  if(obj){
    // old api
    // obj.setFill($(this).val());
    obj.set("fill", this.value);
  }
  canvas.renderAll();
});

$('#font').change(function(){
  var obj = canvas.getActiveObject();
  
  if(obj){
    // old api
    // obj.setFontFamily($(this).val());
    obj.set("fontFamily", this.value);
  }
  
  canvas.renderAll();
});

function addText() {
  var oText = new fabric.IText('Tap and Type', { 
    left: 100, 
    top: 100 ,
  });

  canvas.add(oText);
  oText.bringToFront();
  canvas.setActiveObject(oText);
  $('#fill, #font').trigger('change');
}

document.querySelector('#txt').onclick = function (e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};

canvas{
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>

<input type="file" id="file">
<input type="color" value="blue" id="fill" />
<select id="font">
  <option>arial</option>
  <option>tahoma</option>
  <option>times new roman</option>
</select>
<button onclick="addText()">Add Custom Text</button>
<br />
<canvas id="canvas" width="750" height="550"></canvas>
<a href='' id='txt' target="_blank">Click Me!!</a>
<br />
<img id="preview" />

Update: To keep the text always in the front you need to use .bringToFront() function.
(Thanks to @Amit Sharma in Fabric.js - problem with drawing multiple images zindex)

http://jsbin.com/qicesa/edit?html,css,js,output

Question 5

I've updated your jsfiddle, Now it works Demo.

On your page is something wrong - look at your dev console:

  $('#drawing-mode-selector').on('change', function() {
  //Uncaught TypeError: Object [object Object] has no method 'on'

Question 6

I solved the problem by generating SVG file. I translated all my canvas drawing functions into SVG drawing tags.

Something like that:

function exportSVG() {
    var svg = '<?xml version="1.0" standalone="yes"?>';
svg += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
svg += '<svg width="1065px" height="529px" xmlns="http://www.w3.org/2000/svg" version="1.1">';

for(var i=0; i<myPoints.length; i++) {
   svg += "M"+myPoints.x[i]+","+myPoints.y[i]+" ";
   svg += "L"+myPoints.x[i+1]+","+myPoints.y[i+1];
   svg += '" fill="none" stroke="rgb('+color+')" stroke-opacity="'+opacity+'" stroke-width="'+size+'px" stroke-linecap="round" stroke-linejoin="round" />';
}
svg += "</svg>";
}

So, in svg variable there will be SVG file generated from Canvas. Thanks everybody!

Fabric.js Clip Canvas (or object group) To Polygon

Answers

javascript,php,html,canvas,fabricjs