<canvas> creates a fixed size drawing surface that exposes one or more rendering contexts, which are used to create and manipulate the content shown.
The <canvas> is initially blank, and to display something a script first needs to access the rendering context and draw on it. The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. getContext() takes one parameter, the type of context.
var canvas = document.getElementById('canvas1'); var ctx = canvas.getContext('2d');
In the first line we retrieve the canvas DOM node using the getElementById method. We can then access the drawing context using the getContext method.