CODEWITHSUNDEEP
javascriptfabricjs
user3869081
user3869081

Reputation: 11

Fabric.js circular bounding box over image

I need to implement a functionality of drawing an image in a circle on canvas. I'm using Fabric.js, but I could not find any solution. Actually when image is drawn in circle, it should not be out of bounds of image and also option to position the image in circle.

Upvotes: 0

Views: 1269

Answers (1)

PromInc
PromInc

Reputation: 1233

You would apply a ClipTo property to your image. The ClipTo would then define the circle size that you'd be cutting around the image.

Here is an example of this from the Fabric.js site: http://fabricjs.com/clipping/

clipTo: function (ctx) {
  ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
}

That example is straight up clipping however, and does not include the ability to move the image within the circle, because the circle and clipping region are essentially one object.

I've done some work around making a clipping region with the ability to move the image within it using FabricJS. Here is an example of how I've implemented this for a rectangle. You'll have to explore it for circles deeper as I haven't fully flushed out that example yet. http://jsfiddle.net/PromInc/ZxYCP/

Upvotes: 1

Related Questions