HTML5 Canvas Performance: Loading Images vs Drawing

Question

I\'m planning on writing a game using javascript / canvas and I just had 1 question: What kind of performance considerations should I think about in regards to loading images vs

Answer 1

If you are just drawing simple geometry objects you can also use divs. They can be circles, squares and lines in a few CSS lines, you can position them wherever you want and almost all browser support the styles (you may have some problems with mobile devices using Opera Mini or old Android Browser versions and, of course with IE7-) but there wouldn't be almost any performance hit.

Answer 2

Image loading out of the cache is faster than generating it / loading it from the original resource. But then you have to preload the images, so they get into the cache.

Answer 3

As with most gaming considerations, you may want to look at what you need to do, and use a mixture of both.

For example, if you are using a background image, then loading the bitmap makes sense, especially if you will crop it to fit in the canvas, but if you are making something that is dynamic then you will need to using the drawing API.

If you target IE9 and FF4, for example, then on Windows you should get some good performance from drawing as they are taking advantage of the graphics card, but, for more general browsers you will want to perhaps look at using sprites, which will either be images you draw as part of the initialization and move, or load bitmapped images.

It would help to know what type of game you are looking at, how dynamic the graphics will need to be, how large the bitmapped images would be, what type of framerate you are hoping for.

Answer 4

The landscape is changing with each browser release. I suggest following the HTML5 Games initiative that Facebook has started, and the jsGameBench test suite. They cover a wide range of approaches from Canvas to DOM to CSS transforms, and their performance pros and cons.

http://developers.facebook.com/blog/post/454

http://developers.facebook.com/blog/archive

https://github.com/facebook/jsgamebench

Answer 5

This article discusses the subject and has several tests to benchmark the differences.

Conculsions

In brief — Canvas likes small size of canvas and DOM likes working with few elements (although DOM in Firefox is so slow that it's not always true).

And if you are planing to use particles I thought that you might want to take a look to Doodle-js.

Answer 6

It really depends on the type of graphics you'll use, so I suggest you implement the easiest solution and solve the performance problems as they appear.

Generally I would expect copying a bitmap (drawing an image) to get faster compared to recreating it from primitives, as the complexity of the image gets higher.

That is drawing a couple of squares per scene should need about the same time using either method, but a complex image will be faster to copy from a bitmap.