Question

I have an image, and I want to show the same image multiple times in the canvas with different rotations. For that I use context.rotate() to rotate the image and context.fill() to draw it. To be able to show the image using fill(), I first need to use createPattern() method, as in:

context.save();
var altPattern = context.createPattern(image, "repeat");
context.fillStyle = altPattern;
context.restore();

My problem is that although I use save() and restore(), the last createPattern() I use affects the first fillStyles as well, and draws all the images in a single rotation. How can I create different patterns for the same image, while using context.rotate() to rotate it?

Calling createPattern() again and assigning it to a different variable doesn’t work.

Answer 1

Ok I got it. You should use context.beginPath() when beginning to fill or stroke a new part in the canvas. I didn’t use it at first, I just used moveTo() and moved the context around, calling fill()s everywhere. It looked like it was working, but with createPattern() this problem came out. So for your safety, always begin with context.beginPath() for every complex shape you decide to fill or stroke.