Forums » Impact Engine » mobile safari speedup hack

hi -

i came across this hack today to speed up canvas performance, however it doesnt seem to work immediately with impact2d - the click events stopped responding.

also on the emulator and device, the scale factor seemed to behave differently.

has this already been looked into?

http://29a.ch/2011/5/27/fast-html5-canvas-on-iphone-mobile-safari-performance

----

I finally found a way to optimize 2d canvas drawing on the iPhone 4. Because of the retina display the canvas seems to be rescaled in a slow way (in software?). So even though the rendering itself is relatively fast, the end result is slow.
Setting the Viewport
The first step is to set the viewport scale to 0.5 which will result in having one pixel per css pixel.
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"/>
So now the rendering is fast, but the picture is tiny.
3D transforms to the rescue
To scale the picture up we can use css 3d transforms which are fast.
canvas { -webkit-transform: scale3d(2, 2, 0) translate3d(200px, 110px, 0); }
Also note the translation to move the image back into place as it is being scaled from the origin.

Just using -webkit-transform: scale3d(1, 1, 1) will do too. It enables the hardware accelerated compositing for that element, but won&039;t actually do anything else. You can then scale the canvas element in CSS using #width and height.

The other option is to use Impact&039;s internal scaling param when calling #ig.main().

More in this thread.