You are right that it is very slow on Android devices, I ran into the same problem and searched on the Internet. I only find people who agree with us.
I have done several things to speed up the process (although it is of poor quality). I also only checked on HTC Sensation and Samsung galaxy tab 10.1. I think you will need to use different settings for different phones.
- set the screens so that my phone does not create a larger canvas, and then reduce it again.
- enlarge the scene 2 times. This will reduce the pixels used by half, so you actually have less canvas stretched across the entire screen.
- Do not use clearRect to clear the entire canvas and then redraw everything. In fact, removing clearRect from your bouncing ball example will show many improvements. Clear areas that are actually changing (bats and ball), and then redraw them will be enough.
On the side, I didn’t notice that Android 2 and 4 are faster than 3, but this is based on testing on only 3 devices, therefore not hard statistics.
I also read that using translate3d on the canvas will render the equipment if it is available, but I have not verified / confirmed this.
Some code that might help you:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"/> $(gameEl).css('-webkit-transform', 'scale3d(2, 2, 0) translate3d(0, 0, 0)'); $(gameEl).css('-webkit-transform-origin', '0 0');