fabricjs 2.3 clipPath test

by uemon

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<canvas id="c1"></canvas>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>

JavaScript

(function() {
  var canvas = new fabric.Canvas('c1',{
  		width:500,
  		height:500,
  		backgroundColor:"#aaaaaa",
  });
  var clipPath = new fabric.Rect({ width: 500, height:250, top: 0, left: 0, absolutePositioned: true });
  var clipPath2 = new fabric.Rect({ width: 500, height:250, top: 250, left: 0, absolutePositioned: true });
  fabric.Image.fromURL('//fabricjs.com/assets/dragon.jpg', function(img) {
    img.clipPath = clipPath;
    img.scaleToWidth(500);
    canvas.add(img);
  });
  fabric.Image.fromURL('//fabricjs.com/assets/dragon2.jpg', function(img) {
    img.clipPath = clipPath2;
    img.scaleToWidth(500);
    img.top = 250;
    canvas.add(img);
  });
})()