Template for issues

by tinyhustlee

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c" width="600" height="300"></canvas>
<div id="svg">

</div>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

/**
 * fabric.js template for bug reports
 *
 * Please update the name of the jsfiddle (see Fiddle Options).
 * This templates uses latest dev verison of fabric.js (https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js).
 */


// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c', { backgroundColor : "cyan"});

var clipPath = new fabric.Path("M100,100v100h100V100H100z",{ top: 100, left: 100, scaleX:2 }); 
var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  canvas.clipPath = clipPath;
  canvas.add(group);
  document.getElementById("svg").innerHTML = canvas.toSVG();
  console.log(canvas.toSVG());
  canvas = new fabric.Canvas('c', { backgroundColor : "cyan"});
  var clipPath = new fabric.Circle({ radius: 100, top: 0, left: 50 });
  var group = new fabric.Group([
    new fabric.Rect({ width: 100, height: 100, fill: 'red' }),
    new fabric.Rect({ width: 100, height: 100, fill: 'yellow', left: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'blue', top: 100 }),
    new fabric.Rect({ width: 100, height: 100, fill: 'green', left: 100, top: 100 })
  ]);
  canvas.clipPath = clipPath;
  canvas.add(group);