HTML5 Canvas: mixing multiple transformations

Question

How can I zoom out an image then rotate it 30 degrees by its center, then flip vertically the rotated image, while keeping it rotated?

Please show what you've already tried. Also - did you look at http://stackoverflow.com/questions/16722694/html5-canvas-mixing-multiple-translate-and-scale-call? — andreister, Jul 02 '13 at 07:25

score 0 · Answer 1 · answered Aug 19 '13 at 06:50

Actually the solution was quite simple. It's not about math - i.e. mixing the transformation matrix - it's about js and the way canvas works. I've actually forgot to call context.save() and context.restore() before and after (all) my transformations. So actually half of the transformations were applied, and the other half were applied on the next iteration. So now I just do context.save , then all my transformations, then context.restore at the end. Note that transformations are cumulative, i.e. one rotation of 1 degree followed by another rotation of 1 degree results in a 2 degree rotation at the end.

HTML5 Canvas: mixing multiple transformations

1 Answers1