Playing with the New Canvas Element

Full adoption of HTML5 is just round the corner, and with more and more browser-vendors making HTML5 top-priority these days, it’s time, I think, we should take a look at some of the cool things we can do with the new <canvas> element. So what is it? Well although I don’t profess to be an expert, I should tell you that it is much like a canvas in the real world, in that you can draw on to it using code, you can stick pictures on to it, and more interestingly you can manipulate these pictures. But a wonderful aspect of the new element is that it isn’t really that hard to get to grips with, and the code for creating some interesting stuff is relatively simple to learn. So instead of writing a load of uninteresting and complex code out, I thought I might just tell you of a very simple idea that I, like many others, had.

After playing with the element for a short while I suddenly realised what I could do – make a really simple drawing application! I know not the most far out or original idea, but I liked the idea. So I set about creating it. Here’s the demo. So as you can see it is really simple, but you might think that there would be a lot of code to create it. Actually the code that listens for the mouse click and drag actually occupies more space than that of the canvas code. Let’s have a look. Here is the HTML.

<div id="controls">
<input id="brushRadius" type="text" value="4"></input>
<input id="brushColour" type="text" value="000000"></input>
<div id="palette"></div>
</div>

<canvas id="blank">
Your browser doesn't support this feature.
</canvas>

So at the top you can see the controls section, which allows the user to input two variables – the stroke width and the colour – both very simple. Below this is a small box which will have it’s background colour set to that of the current brush colour later on. Now the Javascript. Notice the text between the canvas tags, this will be displayed if the browser doesn’t support the canvas element.

var canvas = document.getElementById('blank');
	
var ctx = canvas.getContext('2d');
				
$("#blank").attr('width',$(window).width());
$("#blank").attr('height',$(window).height());

ctx.lineWidth = 4;
			
var mousedown = false;	
			
$("#blank").mousedown(function(e){					
	mousedown = true;						
});
				
$("#blank").mouseup(function(e){					
	mousedown = false;	
});
				
$("#blank").mousemove(function(e){		
	var x = e.pageX;
	var y = e.pageY;
		
	if(mousedown){				
		ctx.lineTo(x,y);
		ctx.stroke();
	}else {		
		ctx.moveTo(x,y);				
	}					
});
								
$("#brushRadius").change(function(){
	ctx.closePath();
	ctx.lineWidth = $("#brushRadius").val();
	ctx.beginPath();
			
});
				
function updateColour(){				
	var colour = $("#brushColour").val();

	ctx.closePath();
	ctx.strokeStyle = "#" + colour;
	ctx.beginPath();
					
	$("#palette").css("backgroundColor","#" + colour);					
}
				
$("#brushColour").change(function(){ updateColour(); });
$("#brushColour").keydown(function(){ updateColour(); });

Right, it may look like a lot, but bear with me. At the top we declare the canvas and make it into a 2D area to draw onto, we also declare a variable called “ctx” (short for context) to hold the canvas element, thus making the code more efficient. Then we set the canvas to fill the entire window and make a variable called “mousedown” and set it to false, notice we also set the brush width to 4 as a default value. This will be altered whenever the user clicks and hold the mouse button down by the following functions. Next we use the mousemove function to detect movement, and check to see if the mouse button is down. If it is then we draw a line from the previous location, to the current location and stroke it, otherwise we simply move it.

After this we listen for the #brushRadius input to be changed and then alter the line’s width based upon the value inputted. The reason we close and then open the line, is to stop the changes affecting the previously drawn lines. Finally we have a function to update the colour. This function makes a variable to store the inputted value, closes the line, updates the line’s colour, and then starts it again. And then it updates that box I told you about earlier, to reflect the inputted value. This function is then executed using the following two functions that fire whenever the input is altered.

So there is a lot to take in there, but after you familiarise yourself with it, you should begin to understand the simplicity of the code. The canvas element can do so much more than what I’ve shown you here today, and I would encourage you to get to grips with it. I would suggest a trip to the Mozilla developer’s centre and go through the tutorial. It really is nice to have such power reasserted using such simple code – enjoy!