How to flip images horizontally with HTML5

Question

In IE, I can use:

<img src="http://bit.ly/acuv47" style="filter:FlipH">

to implement a image flip horizontally,

any way to flip horizontally in HTML5? (maybe use canvas?)

thanks all :)

Answer 1

canvas = document.createElement('canvas');
canvasContext = canvas.getContext('2d');

canvasContext.translate(width, 0);
canvasContext.scale(-1, 1);
this.canvasContext.drawImage(image, 0, 0);

Here's a snippet from a sprite object being used for testing and it produces the results you seem to expect.

Here's another site with more details. http://andrew.hedges.name/widgets/dev/

Answer 2

You don't need HTML5, it can be done with CSS same as in IE:

-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
filter: FlipH;