Image Rotation + horizontal or vertical flip

Go To


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?


2012-04-03 22:43
by fernandojsg


Try this plugin



It works in both css3 and Canvas.

2013-08-10 17:01
by Madan


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.

2012-04-04 07:30
by jing3142