HTML5 - Drawing with Canvas

One useful feature of HTML5 is the Canvas element. The HTML5 Canvas element allows developers to 'draw' graphics on the screen. In some cases, developers have even drawn complete works of art, from Homer Simpson to the Internet Explorer logo to a droplet of rain to a parrot (1).

Although the HTML5 Canvas is an excellent way for rendering graphics without the need for GIF or JPEG images, be warned that it is not widely supported. The HTML5 Canvas element is only supported in the following browsers@ IE 7+, Opera 10+, Safari 3+, Chrome 3+, and Fireforx 3+. It also requires Javascript to 'draw' the elements, and some of the more advanced features may not be supported or work consistently across browsers.

To use an HTML5 Canvas element, the user simply needs to ensure that the correct document type is set as the first line in the html page; This is done by inserting the tag: <!doctype htm>. Then, add a <canvas> element to the web page, as below.

<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>

This <canvas> tag will act as a placeholder for you to draw the elements. The height and width can be changed in the canvas; also note that the HTML5 Canvas will be empty. In order to fill the canvas, we use Javascript.

The following lines of code manipulate the canvas and draw the elements into place. First, we check whether or not the browser supports canvas using the method getContext(). Then, we specify getContext(); '2D' is two-dimensional and will render two-dimensional graphics. (One can also render in 3D.) The user can specify the fill colour and stroke colour of the graphic using fillStyle and StrokeStyle, respectively and specifying the value using the RGB value or the hexidecimal value.

The following steps to create the element require the drawing to take place, and this is achieved by starting a new path - using beginPath() - and then moving the path to its X and Y coordinates on the canvas using moveTo(X,Y). The path can be moved from point to point to create a graphic, and when the developer is finished, the method closePath() is called. Finally, the developer needs to call the fill() method to fill the new graphic with the colour defined earlier in the code.

<script language="Javascript">
var drawingCanvas = document.getElementById('myDrawing');
if(drawingCanvas.getContext) { //check browser support for canvas
    var ctx = drawingCanvas.getContext('2d');
    ctx.fillStyle = 'rgb(111,21,33)';
    ctx.beginPath()
    ctx.moveTo(0, 0);
    ctx.lineTo(150, 0);
    ctx.lineTo(150, 0);
    ctx.lineTo(75, 15);
    ctx.closePath();
    ctx.fill();
</script>

I've provided another example below that programatically uses logic to print out verticle lines.

<script language="Javascript">
var context = drawingCanvas.getContext('2d');
context.strokeStyle = "#C432F2";
context.beginPath();

for (var x = 0.5; x < 500; x += 10) {
  context.moveTo(x, 0);
  context.lineTo(x, 380);
}
context.closePath();
context.stroke();
</script>

Shapes can also be drawn by using the relevant method, such as 'arc' or 'rect' methods. The method below uses 'arc' to create a circle.

context.arc(100,100,50,0,Math.PI*2,true);

Hopefully this article provides you with a basic understanding of the HTML5 Canvas element to explore other features and advanced features (gradients, 3D graphics, charts, etc) on your own. Also, the following website (2) is a useful 'cheat sheet' if you intend on using HTML5 Canvas to draw your own graphical elements, and there are also many other resources out there.

Happy drawing; happy programming.

(1). http://www.queness.com/post/4023/18-brilliant-pure-css-drawings

(2). http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf