Javascript Resources

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
• canvas
• SVG

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.

The CanvasRenderingContext2D interface provides the 2D rendering context for the drawing surface of a <canvas>element.

With the new HTML5 specification comes a whole bag of new goodies including a new tag – <canvas>. This tag is effectively like a piece of paper on your page onto which you can draw and this is what the RGraph library is based on. The drawing is done by JavaScript and there’s a whole bunch of functions available to you to draw shapes and lines with.

Because <canvas> uses a “fire and forget” methodology there is no DOM for you to get references to shapes already drawn on the canvas – so you must remember the coordinates of the shapes yourself. It’s because of this that the <canvas> tag is so fast.

W3Schools Canvas Element

Despite this though there is a Path2D object that has been added, along with other new features that have been specified by the W3C that will allow you to retain path information and test at a later time for hits etc. The Path2D object is described here and there’s more information on new canvas features (like hit regions) on the RGraph blogSo on to the information!

Added in HTML5, the HTML <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.

Mozilla Canvas 2D rendering context

W3C canvas 2D context spec.

This specification defines the 2d context type, whose API is implemented using the CanvasRenderingContext2D interface.

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:
  CSS

  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).