How To Hide The Overflow Of Photos In Canvas?

I am trying making a photo frame pattern on canvas. In which I want to put two, three or maybe more photos under an overlay frame. Where few parts of the overlay frame are transpa

Solution 1:

You need to apply a clipTo() method onto the image.

var canvas;

$(function(){
    canvas = window._canvas = new fabric.Canvas('canvas');
    var radius = 200;
    fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) {
      img.scale(0.5).set({
        left: 250,
        top: 250,
        angle: -15,
        clipTo: function (ctx) {
          ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
        }
      });
      canvas.add(img).setActiveObject(img);
    });
});

This fiddle show the technique

Fiddle