Not much of informative demonstration, but is cross-platform and shows performance.

If you've noticed, multiple systems are better at drawing single large images than lots of small ones.
Same applies to HTML5, meaning that filling a 640x480 canvas with 40x40 images using two for() loops is not exactly a good thing to do each frame.

Common solution to this problem is to create a 'cache' image that would hold a tiled version of image to be drawn easily.
That means drawing image W*H times only once in a while.

However, actually you can do even better than this.

Continue reading →