CODEWITHSUNDEEP
imagehtml5-canvasfabricjs
Abhinav
Abhinav

Reputation: 752

fabric.js : How to make an image in the shape of a circle with white borders

I am using Fabric.js to create some animations on HTML canvas. I need to make this :

enter image description here

If I use image element I cannot make it circular and not put white border.
If I use circle object I cannot put an image in it.

Any ideas will be appreciated. TIA

Upvotes: 5

Views: 6841

Answers (1)

ptCoder
ptCoder

Reputation: 2247

Try someting like this with clipTo function:

fabric.Image.fromURL(imageURL, function(oImg) {
    oImg.scale(1.0).set({
        left: 10,
        top: 10,
        stroke : 'white',
        strokeWidth : 100,
        clipTo: function (ctx) {
            ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
          }
    });
    canvas.add(oImg).setActiveObject(oImg);
    canvas.renderAll();
});

Fiddle: http://jsfiddle.net/q6Y6k/8/

Upvotes: 8

Related Questions