Search code examples
javascripthtmlcanvasflipmirror

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

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

Solution

    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.