How to improve canvas performance on retina ipad?

Question

We're trying to optimize the game, it works OK on ipad 2, but the simple sprite animation works terribly slow on retina iPad. We're using Safari browser.

We're using CSS to scale the app. At first, we tried to use the libcanvas framework but later switched to the plain HTML5 canvas. We tried to apply the -webkit-transform: translate3d(0,0,0); hack but no luck at all. We're using webkitRequestAnimationFrame method.

We do the series of drawImage:

ctx.drawImage(anim,
                        frame * widthFrame,
                        0,
                        widthFrame,
                        widthFrame,

                        devicePixelRatio * shape.x +0.5|0,
                        devicePixelRatio * shape.y +0.5|0,
                        devicePixelRatio * shape.width,
                        devicePixelRatio * shape.height);

followed by

window.webkitRequestAnimationFrame(draw,root)

The test cases: http://jsfiddle.net/LJRXb/7/ high resolution http://jsfiddle.net/AsfcL/1/ low resolution

Any ideas what can we do to improve the performance? Anything wrong with the app? Is there any better method to perform a sprite animation? Thank you for your attention and expert advice.

For sprite animations, I personally apply the image to a div as background image and change its background-postion (to the next frame) after some interval. I feel that is the lightest way to achieve this. — Parthik Gosar, Apr 07 '13 at 19:54
You might want to check the HTML5 Rock's [Canvas Performance Tutorial](http://www.html5rocks.com/en/tutorials/canvas/performance/). Also check [this question](http://stackoverflow.com/q/5080817/2252829) and [this one](http://stackoverflow.com/q/16191324/2252829). Both questions are about performance in HTML5 canvas. — Gustavo Carvalho, May 03 '13 at 16:49

score -1 · Accepted Answer · answered May 09 '13 at 20:47

-1

We're using CSS to scale the app

I take it you mean you're setting the canvas css width and height via CSS? This will kill performance. You need to scale on the canvas itself instead of scaling the CSS properties of the canvas element. Set the canvas to width / height 100% like this:

<canvas id="myCanvas" width="100%" height="100%></canvas>

And then draw accordingly using canvas context setScale() e.g.

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

ctx.setScale(myScaleX, myScaleY);
...

answered May 09 '13 at 20:47

Rob Evans

6,750
4
39
56

With all of that said, performance on "retina" devices is currently terrible for canvas anyway. – Rob Evans May 09 '13 at 20:47
3

If you downvote, please provide a reason. If you think some information about an answer is incorrect, provide insight. – Rob Evans Dec 22 '13 at 13:52

How to improve canvas performance on retina ipad?

1 Answers1