how to set canvas boundary circlular using fabric js in angular

Question

how can i make my canvas circular so that my object/logo dont go outside circular shirt collor, please see attatched pictures by default canvas is square , what i want is to be cirular behaviour of canvas. I have tried using css, but behaviour of canvas doesnot change it remains same.

var canvas = this.canvas = new fabric.Canvas('canvas');
var pugImg = new Image();
pugImg.onload = function (img) {
  var pug = new fabric.Image(pugImg, {
    scaleX: .25,
    scaleY: .25
  })
  canvas.add(pug).renderAll();

};
pugImg.src = event.target.src;

Answer 1

Clipping the canvas, will stop the object from going outside of it. Modify circle according to your needs.

var clipPath = new fabric.Circle({
   left: 100,
   top: 0,
   radius: 20,
   inverted: true
});
canvas.clipPath = clipPath;

See here for more info on clipPaths http://fabricjs.com/clippath-part4