Using HTML5 Canvas to Draw Simple Shapes

You should now have an understanding of what a <canvas> tag is in HTML5. So, let’s start with drawing some simple shapes.

Whenever you need to draw on your canvas, you need to obtain the canvas context first. The context is bound to its HTML element and exposes methods for creating paths, fillings, strokes, etc. The context is your friend in HTML5. Let’s start off with an overly simplified drawing of a target – a cross-hair over a circle with a stroke.

First of all, you have to have your canvas you are going to draw on:



Then, you’d want your canvas to be of certain size, let’s say 200×200 pixels so, let’s introduce an inline-style CSS:



Now we are ready to draw on the canvas using Javascript:

function drawBall()
{
	var centerX = 100;
	var centerY = 100;
	var radius = 50;
	var startingAngle = 0;
	var endingAngle = 2 * Math.PI;
	var counterClockwise = false;

	var canvas = document.getElementById('ball');
	var context = canvas.getContext('2d');
	
	context.beginPath();
	context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterClockwise);
	context.fillStyle = "#ffff00";
	context.fill();
	context.lineWidth = 4;
	context.strokeStyle = "#ff0000";
	context.stroke();
	context.closePath();
	
	context.beginPath();
	context.moveTo(0, 100);
	context.lineTo(200, 100);
	context.moveTo(100, 0);
	context.lineTo(100, 200);
	context.lineWidth = 2;
	context.strokeStyle = "#ff00ff";
	context.stroke();
	context.closePath();
}

The first thing we do is get the canvas element and get its context. Once we got the latter, we can start to draw. Whenever you draw something, that something needs to be enclosed in beginPath() and closePath() methods invoked on the context object. You can put stroke style, fill style, etc. after the closePath() method – that would not make any difference, they will still be applied to the last path – my preference is to contain everything in between the beginPath() and closePath methods so that it's sectioned.

As you can see, drawing things on a canvas is pretty straight forward and, of course, arc() and lineTo() are just a couple of many methods that HTML5 supports.

Now, one important note, especially to those who adapted an understanding that CSS is how you define the look and feel and dimensions – hang on for a ride! Setting you canvas size in CSS will produce rather squished effects compared to using width and height attributes on the tag itself. I'm not sure why but surely there's gotta be a reason for that – if you know one, post it as a comment.

Here is HTML5 code you can save and try out:

<!DOCTYPE html>
<html lang="en">
<head>
	
		
	
</head>
<body>
	
	
</body>
</html>

And here's the HTML5 code that uses CSS to size the canvas, instead of using attributes on the tag so, be aware of that:

<!DOCTYPE html>
<html lang="en">
<head>
	
	
	
</head>
<body>
	
		
</body>
</html>

Have fun, kids!

This entry was posted in HTML5 and tagged , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *