javascript - 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

question from:https://stackoverflow.com/questions/8168217/html-canvas-how-to-draw-a-flipped-mirrored-image

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.