How to flip images horizontally with HTML5

Question

In IE, I can use:

to implement an image flip horizontally.

Answer 1

For anyone stumbling upon this. If you want to do more complex drawing, the other scale-based answers don't all work. By 'complex' i mean situations where things are more dynamic, like for games.

The problem being that the location is also flipped. So if you want to draw a small image in the top left corner of the canvas and then flip it horizontally, it will relocate to the top right.

The fix is to translate to the center of where you want to draw the image, then scale, then translate back. Like so:

if (flipped) {
  ctx.translate(x + width/2, y + width/2);
  ctx.scale(-1, 1);
  ctx.translate(-(x + width/2), -(y + width/2));
}
ctx.drawImage(img, x, y, width, height);

Here x and y are the location you want to draw the image, and width and height are the width and height you want to draw the image.