Fabric.js: Move Clipped Image Behind Fixed Clipping-mask

I'm working on a small script that lets a user load a custom image into the canvas on the webpage. So far that works pretty neat. The canvas is initialized using the fabric.js scri

Solution 1:

I had the same problem and I solved it with following code:

image.clipTo = function (ctx) {
  ctx.save();

  ctx.setTransform(1, 0, 0, 1, 0, 0); // Reset transformation to default for canvas
  ctx.rect(
    100, 100, // Just x, y position starting from top left corner of canvas200, 200// Width and height of clipping rect
  );

  ctx.restore();
};

You can try it out here: http://jsfiddle.net/Jagi/efmbrm4v/1/