CODEWITHSUNDEEP
javascriptcanvasfabricjs
peterp
peterp

Reputation: 3165

How to set a background image for a FabricJS object

I would like to create a circle object and have the fill set as a non-repeating image.

I've tried this with a pattern, but when I set repeat to no-repeat, the pattern is offset in the middle, rather than top-left. (Which would allow you to see the whole image.)

  1. Is there a way to set a whole image as the background of an object?
  2. If not, is there a way to offset a non-repeating background?

Upvotes: 1

Views: 5858

Answers (1)

kangax
kangax

Reputation: 39168

You can do this by clipping an image with a circle. Take a look at this demo.

Pattern offsets is something that's been on a roadmap. I just went ahead and implemented them.

Take a look at this demo. Simply adjust offsetX/offsetY properties of a pattern to whatever you need, or leave them at 0/0 which would be left/top corner of an object.

Upvotes: 3

Related Questions