canvas
canvas copied to clipboard
tdewolff
Fill a path with an Image
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.
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.
In other words, it is not possible to make a square image into a round image?
