Animation Benchmark


canvas.getContext('2d').drawImage has some downsides:

  • large spritesheets does not work on iPad1 : undefined: INDEX_SIZE_ERR: DOM exception 1: Index or size was negative, or greater than the allowed size
    * the draw speed (refresh) of the animations is slow! 300ms for 671 sprites


    The technique has one benefit: the spritesheet loads much faster than 4 seperate .gif files using the DOM technique.


    Canvas Demo





    The most important benefit is that the browser handles drawing of the images. and your game is free to do more stuff.

    There are some downsides using the DOM:
    * ctx effects are not available, getPixel, setPixel for instance is not available as well
    * You cannot change the speed of the gif animations at runtime
    * multiple I/O's are necessary to download all the resources. When you could use spritesheets it will reduce that loading time.


    DOM Demo