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
You can flip an Image using HTML5 like this: // flip x axis ctx. scale(-1, 1); ctx. drawImage(img, x, y); // flip it back again ctx.
Tap the element you want to flip. On the toolbar below the editor, tap on Flip. You may have to swipe through the toolbar to see the Flip icon. Tap on Flip horizontal to flip it sideways, or Flip vertical to flip it upside down.
In the top menu bar, select Image –> Image Rotation –> Flip Canvas Horizontal/Flip Canvas Vertical. You can do a quick image flip in just one click.
Use JavaScript rotate() method to rotate a drawing object on a canvas.
You can do this by transforming the context with myContext.scale(-1,1)
before drawing your image, however
This is going to slow down your game. It's a better idea to have a separate, reversed sprite.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With