Fill a path with an Image

[Drylozu]

Hi, thanks for creating such an awesome package like this! I want to draw a square image as a circle on a canvas. In JavaScript it would normally look like this:

ctx.beginPath();
ctx.arc(x, y, r, 0, 2*PI);
ctx.closePath();
ctx.clip();
// no matter where you draw, you will only see the "selected" part with the path
// - using ctx.save() before and ctx.restore() after can revert this
ctx.drawImage(0, 0, image);

I have tried several things but I still don't get the same effect.

[tdewolff]

Yes you can, although it's not perfect yet for complex paths (especially self-intersecting paths fail). You can use the path logical operations for this:

p := &canvas.Path{}
// create path
p.Close()

clip := canvas.Circle(5.0)
p = p.And(clip)

ctx.SetFill(canvas.Red)
ctx.DrawPath(x, y, p)

Work is not complete on an image fill pattern yet.

[Drylozu]

In other words, it is not possible to make a square image into a round image?

[tdewolff]

No, not yet.

[leonlarsson]

Is there an update on this?

[tdewolff]

Sorry no update yet. I have very limited time and have just completed the path intersections / path boolean operations code (see https://github.com/tdewolff/canvas/wiki/Boolean-operations). Supporting different types of fill paint is certainly much easier, but I'd like to support images and other (repeatable) paths. This latter is now fixed (see https://github.com/tdewolff/canvas/wiki/Patterns) since the path boolean operations was very buggy and slow, not anymore. Next up are images! I'll post here when there is an update.