Question

I am currently working on image manipulation in canvas and Javascript. I am using fabric.js for it. I just want the user to upload an image and merge it with the template provided by us. ie.,

I want to show the uploaded image only in the empty circle in the center and they can adjust by dragging it.

• If I keep the template as upper layer the user can’t drag and adjust since the canvas is filled with template.
• If I keep uploaded image as the upper layer then the image will overflow the circle.

How can I solve this by giving my user an easy to use interface? I tried for ClipTo function in fabric.js but it doesn’t work with image Object.

Answer 1

I think overlayImage is what you’re after.

Take a look at customization demo for example:

var canvas = new fabric.Canvas('c13');
var circle = new fabric.Circle({ 
  radius: 30, 
  fill: '#f55', 
  top: 100, 
  left: 100 
});
canvas.add(circle);
canvas.setOverlayImage('../assets/jail_cell_bars.png', 
  canvas.renderAll.bind(canvas));