fabricjs clipPath

fabricjs clipPath

by Shakti Patel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<button id="zoomIn">zoom out</button>
<canvas id="c" width="1000" height="1000" class="lower-canvas"></canvas>https://jsfiddle.net/cxhe03v8/#update

CSS

<style>
  #c {
    border:1px solid #ccc;
}
    </style>

JavaScript

var img01URL = 'http://fabricjs.com/assets/printio.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';
var img03URL = 'http://fabricjs.com/assets/ladybug.png';
var img03URL = 'http://fabricjs.com/assets/ladybug.png';


fabric.Image.prototype._render = function(ctx) {
  // custom clip code
  if (this.clipPath) {
    ctx.save();
    if (this.clipPath.fixed) {
      var retina = this.canvas.getRetinaScaling();
      ctx.setTransform(retina, 0, 0, retina, 0, 0);
      // to handle zoom
      ctx.transform.apply(ctx, this.canvas.viewportTransform);
      //
      this.clipPath.transform(ctx);
    }
    this.clipPath._render(ctx);
    ctx.restore();
    ctx.clip();
  }

  // end custom clip code


  var x = -this.width / 2,
    y = -this.height / 2,
    elementToDraw;

  if (this.isMoving === false && this.resizeFilter && this._needsResize()) {
    this._lastScaleX = this.scaleX;
    this._lastScaleY = this.scaleY;
    this.applyResizeFilters();
  }
  elementToDraw = this._element;
  elementToDraw && ctx.drawImage(elementToDraw,
    0, 0, this.width, this.height,
    x, y, this.width, this.height);
  this._stroke(ctx);
  this._renderStroke(ctx);
};

var canvas = new fabric.Canvas('c');
canvas.setZoom(3)
fabric.Image.fromURL(img01URL, function(oImg) {
  oImg.scale(.25);
  oImg.left = 10;
  oImg.top = 10;
  oImg.clipPath = new fabric.Circle({
    radius: 40,
    top: 50,
    left: 50,
    fixed: true,
    fill: '',
    stroke: ''
  });
  canvas.add(oImg);
  canvas.renderAll();
});

fabric.Image.fromURL(img02URL, function(oImg) {
  oImg.scale(.40);
  oImg.left = 180;
  oImg.top = 0;
  oImg.clipPath = new...