Fast html5 canvas on iPhone/mobile safari

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.

That's it you got yourself a massive performance boost in about two lines of code. :)