Question

I have a canvas element with a photo loaded on it. When clicking a link, the following is performed:

var ctx = canvas.getContext("2d");
ctx.scale(-1,1);
ctx.drawImage(canvas, canvas.width * -1, 0, canvas.width, canvas.height);

This works as expected (the image is flipped horizontally) on the first click, the third click, the fifth click, etc. On the second click, the fourth click, the sixth click, etc, nothing happens.

Any ideas on how I can get this to work for every click?

Answer 1

Yeah, the problem is because you’re not restoring the canvas scale to 1,1 after you draw the image, so basically the first time the event is called your canvas scale is gonna be turned into -1,1 the next time it’s gonna be 1,1 but you need it to be always -1,1. That’s because you’re drawing the image directly from the canvas and not from an image element thus, you gonna need to flip it every time.

Try using ctx.save() before the scaling and ctx.restore() after drawing the image. Or calling ctx.scale(-1, 1) again after drawing the image. Or you could just do the scaling outside the event (but after you’ve drawn the image to the canvas the first time) if your canvas is only used for this.