Game Development Reference
In-Depth Information
ctx.beginPath();
ctx.arc(.5, .5, .4*size, 0, Math.PI*2, true);
ctx.fill(); // fill a disc with gradient
ctx.restore(); // restore the last ctx state saved
}
Solutions comparison: Canvas
The problem with canvas-oriented applications is that you usually have stacks of JavaScript code that are
probably far more complex. Choosing this solution means reducing the usage of CSS and HTML, so
everything these technologies give us now has to be implemented in JavaScript. For instance, you have to
handle “redrawing” yourself. If you are used to DOM development, then you will have to learn new
concepts to deal with efficient re-drawing, layering, mouse selection, and so forth—all on your own. At
best, you must use a library (sometimes heavily) to abstract these concepts. Another problem is that you
can encounter cross-browser issues. For instance, I experienced an issue with the Android 2.1 browser;
the
drawImage
method didn't work properly.
Although JavaScript performance has been remarkably improved, it is generally less efficient to make
JavaScript animations than use CSS Transitions and Animations, which can be more easily optimized and
hardware-accelerated. Anyway, it's a tricky claim since
requestAnimationFrame
, the JavaScript function
designed to make animation loop, is implemented by browsers.
There are also some advantages with using canvas. The major advantage is that possibilities are clearly
wider. Accessing the pixels array, you can do whatever you want. For instance, making a particle system
should
be
done
with
canvas
and
especially
using
the
powerful
canvas
blend
mode
(see
Moreover, 3D has recently been introduced as a web specification. Supported by almost all recent desktop
browsers, WebGL is a bridge to OpenGL. Hence, it allows us to create high-performance 3D with
impressive graphic acceleration.
Solutions comparison: Pure DOM
For now, the Pure DOM approach is usually better because it takes more advantage of web technologies.
First of all, it's generally more efficient and optimizable with the browser (if only to a certain extent; for
instance, if you have a very large number of DOM elements, then the performance will suffer—especially
for animations). Second, as we explained before, it's more maintainable and easy to split the content,
the style, and the logic into separate and descriptive parts. CSS is a descriptive language, meaning you
define how elements are styled. There are also some beneficial side effects, such easier debugging with a
DOM inspector.
However, CSS is limited. With the new CSS3, browser display differences occur when a browser doesn't
yet support a given CSS property. But the good news is, because the CSS is descriptive, there is usually
