I'm developing an html5 canvas image application where you could make basic transformation like 90º rotation, flip horizontal and vertical.
I use the following matrix to paint the image:
matrix.scale(flipHorizontal, flipVertical); // Where each flip could be 1 or -1
matrix.rotateZ(angle); // Angle could be 0,90,180 or 270º
Everything looks fine at the beginning but when I make a rotate90º and after an horizontal flip it just acts like a vertical flip.
Any idea how to fix it?
example http://img688.imageshack.us/img688/1570/73811955.jpg
Try this plugin
Demo: http://dmadan.in/imageflip.html
Source: https://github.com/dmadan86/imageflip
It works in both css3 and Canvas.
Cannot tell from the code snippet you have given. Could be a mistake inside the functions or when you call the functions. Might be something to do with how the axes are being handled. A horizontal flip is a reflection in the y (vertical axis). After rotation the y axis of your image is now horizontal, so unless you correctly deal with the axes a 'horizontal flip' will reflect in the y axis which is now horizontal producing the image as given.
