User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 304

that could, for instance, be supplied as the source image data for an image element
( img ).
As mentioned earlier, the context will tell what type of image we are dealing with,
which can be a two-dimensional or three-dimensional image. To retrieve a certain con-
text, a text keyword is given as an argument to the getContext() method. 5 To re-
trieve a two-dimensional context, the text keyword "2d" is used. To retrieve a three-di-
mensional context, the text keyword "webgl" is used instead. As you can see, the 3D
context uses WebGL for interacting with the image.

Note WebGL is a 3D rendering specification for web browsers that is overseen by
the Khronos group. 6 WebGL is an experimental feature in web browsers, and as such,
the webgl keyword may not work for the immediate future. If you experiment with
this context and find it does not work, try "experimental"-webgl instead, which
is the temporary context keyword being used in supporting browsers until WebGL is
further along in its development.

Let's retrieve the 2D context and inspect its properties and methods using the
JavaScript console; edit the script to look like the following:
var canvas;
var context;

// variable to hold a reference to

the canvas context
function init() {
canvas = docu-

ment.getElementById("canvas");
// retrieve the 2D canvas context
context = canvas.getContext("2d");
// inspect the canvas context
console.log(context);
// inspect the canvas context prototype
console.log(context.constructor.prototype);
}
window.onload = init;
This will log two objects to the console, CanvasRenderingContext2D and
CanvasRenderingContext2DPrototype (the actual names may vary by
browser). The first will show the properties available on the context, which includes
the color of lines and fills added to the canvas. The CanvasRenderingContex-
t2DPrototype shows the available methods, which includes a range of methods for