Flip Images using HTML5 Canvas
You can flip an Image using HTML5 like this:
// flip x axis ctx.scale(-1, 1); ctx.drawImage(img, x, y); // flip it back again ctx.scale(-1, 1);
You can flip along the y axis in the same way. I'm note sure how fast this transformation is, in practice so you might need to cache it if you are doing realtime graphics.
Jonas Wagner
Can you please explain a bit more about caching? How exactly would you cache canvas and when would you do it?
Comment by steve0 — 3/31/11 8:02 AM | # - re
Draw it to a canvas fliped and then just draw that canvas afterwards which would result in a straight blit - in theory. In practice it probably doesn't matter.
Comment by Jonas Wagner — 3/31/11 12:21 PM | # - re
Basically you mean have a secondary canvas as a 'backbuffer' that you do all your design to, and then you 'flush' it to the main one? I doubt this gives a per gain... I get the impression that the performance of drawing to any canvas itself is the bottleneck :(
Comment by steve0 — 4/1/11 3:18 AM | # - re
I didn't try it but in the past the only fast operation on canvas (in firefox) was drawing/blitting images without any transformation. As soon as you had any rotation it would be a lot slower. Once we have hardware accelerated canvas this should not be an issue anymore though.
Comment by Jonas Wagner — 4/1/11 10:54 AM | # - re
ok thanks for responding! Awesome blog though, nice samples, and one of the few blogs that have really taken a deeper look at newer js features :) Happen to have any idea how to draw an image 'rotated' onto a canvas? For example draw this image rotated 10 degrees. Ctx.rotate is not very friendly, as it rotates the entire canvas and the coordinates seem to be hard to match
Comment by steve0 — 4/1/11 10:48 PM | # - re