HTML Canvas: How to draw a flipped/mirrored image?

Question

I'm trying to flip/mirror an image as I paint it on an HTML canvas; I found a game tutorial showing a sprite sheet per direction a character has to face, but this doesn't seem quite right to me. Especially since each frame has a different size.

What would be the best technique to reach this goal?

I tried to call the setScale(-1, 1); on my canvas with no success. Maybe that isn't meant for this.

Thanks

Answer 1

1. You can do this by transforming the context with myContext.scale(-1,1) before drawing your image, however

2. This is going to slow down your game. It's a better idea to have a separate, reversed sprite.

Answer 2

You need to set the scale of the canvas as well as inverting the width.

drawToCanvas : function(v, context, width, height){     context.save();     context.scale(-1, 1);     context.drawImage(v, 0, 0, width*-1, height);     context.restore(); } 

There are probably some performance issues with this but for me that was not an issue.