How does one optimize an HTML5 Canvas and JavaScript web application for Mobile Safari?

Unfortunately, the answer is to draw less. I've found the bottleneck with canvas based applications (on any platform, really) is the time it takes to actually draw pixels.

Here are some things to try:

1. Use several canvas layers. Draw your background to one layer while drawing your objects to another layer (absolutely positioned on top of the background layer). (Note: I haven't tried this on mobile safari, but it can help on other platforms)

2. Only redraw sprites that have changed. This is tricky but definitely increases performance. The idea is to store whether or not a sprite needs to be redrawn and redraw only sprites that need it along with the background behind them. (This also needs to cascade to other objects that sprite might be overlapping.)

The thing with developing on Chrome is that a) its JavaScript engine (V8) is fast as hell and b) the newest versions (7,8,9) all have some GPU acceleration when it comes to canvas rendering. That coupled with the fact that mobile hardware just isn't as powerful as your desktop/laptop means that it'll be really difficult to get anywhere near the same performance on mobile safari.

I think, for the time being, the best approach might be to target your game at mobile safari from the get go and try and build a game that's not as redraw intensive.

everything @Gosub said plus:

look at whatever math you're doing, see if there's anyway to use more efficient algorithms.

use smaller images. try making the dimensions of the image powers of 2

see if you can get rid of alpha blending on the canvas or dont use CSS opacity property.

please post back your results. would be interesting to know what things helped most.