WebGL, Canvas, or SVG? Choose the right API

  • Article

Of the three primary HTML5 graphics APIs, SVG can be a good choice for 2D casual games, such as Boulder Bop.

There are three graphics APIs to choose from:

WebGL

If you’re already familiar with OpenGL (ES 2.0 in particular), you can use WebGL for a simple 2D game, like Boulder Bop. If you're not, this API is more complex than you need for this simple game.

canvas

Canvas is the typical choice for most HTML5 games. It's simple and speedy, particularly for games with many objects. However, canvas has its limitations:

  • Drawn objects become part of the canvas bitmap and therefore cannot be associated with an event handler. For example, clicking a specific circle on the canvas cannot natively fire a particular event handler. You can, however, wire up an event handler for the entire canvas which allows you, using a bit of math, to calculate whether or not a given circle was clicked (but the browser doesn't provide this behavior natively).
  • When you move an object across the canvas, you must redraw the entire canvas for each move increment.
  • Liquid (or fluid) layout is relatively difficult – the browser can't natively adjust the canvas size based on the browser’s current window size. You can create this behavior programmatically, however, by listening for window size changes and adjusting the size of the canvas appropriately.
  • The browser can't natively convert screen coordinates to your game’s world coordinate system. For example, the browser can't natively convert the position of a mouse click (in screen coordinates) to a convenient game coordinate system when canvas is used. You can create transformations equations to work here - see SVG Coordinate Transformations (Windows) for more info. Note that if you choose to implement liquid canvas layout, you must update the equation coefficients each time the window size changes.

SVG

While canvas provides simplicity and speed, SVG provides flexibility. For example:

  • Each graphic object becomes part of the DOM. So, if you want, each graphic object in the game can have one or more associated event handlers. For example, by clicking a specific circle on the "canvas", called a viewport in SVG terminology, you can natively fire an event handler. The down side is that perform can decrease with more objects in the DOM.

  • The game’s background can generally be ignored. That is, to move an SVG graphic, you change its positional (x, y) values and the browser updates the background for you. You don't need to update all the objects in the SVG viewport (as you would with canvas).

  • The browser handles liquid layout for you, if the correct CSS is used:

    html, body {
  height: 100%;
}

    We'll cover this in more detail later.

  • SVG provides a current transformation matrix (or CTM). Using the CTM, you can convert screen coordinates to a convenient game coordinate system whether liquid layout is used or not. For more info, see SVG Coordinate Transformations (Windows).

Because of its convenience, ease of liquid layout, and built-in matrix methods, SVG is often a good choice for games that do not contain a large number of objects (so as not to over-bloat the DOM). For games with many objects, canvas can be a better choice because the size of DOM is not effected by the number of game objects in the canvas element. For more info, see How To Choose Between SVG and Canvas (Windows).

canvas

How To Choose Between SVG and Canvas (Windows)

Internet Explorer 10 Samples and Tutorials (Windows)

SVG

SVG Coordinate Transformations (Windows)

WebGL

Windows Internet Explorer 9 Samples and Tutorials (Windows)