Yesterday i followed a mswebcafe workshop about the canvas element. In this session we got a closer look at the possibilities of the canvas element. At the end of the session we got the possibility show what we had learned that day. I choose to create a canvas where you could draw lines with your cursor. Afterwards several people asked me to share my code, and what is a better way than make a blog post about it.
To accomplish this the first thing we need to do is enable our webpage to render HTML 5. We do this by setting the document type to:
<!DOCTYPE html>
The next thing we need to do is adding our canvas element. Everything we put between the canvas element will be shown on browsers that don’t support the canvas element.
<canvas id="canvas" width="500" height="500">You’re browser doesn’t support the canvas element</canvas>
Everything that is left now, will be accomplished trough JS. First thing first if we want to do something with the canvas element, we have to retrieve it as it’s context.
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
In the startDraw function, the first thing we will do is determine the point from where we want to start drawing. Next, we will add a new event handler on the mousemove event so we can follow the cursor en draw where ever he goes.
function startDraw(e) {
startpoint = getCursorPosition(e);
canvas.addEventListener("mousemove", drawIt, false);
}
Via the getCursorPosition methode we can determine what the current mouse position is. The way to do this is:
function getCursorPosition(e) {
var x;
var y;
if (e.pageX != undefined && e.pageY != undefined) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
return {"x": x, "y": y};
}
When we stop drawing our line (mouseup event), we will first cancel the event and then we will remove the mousemove event so it will stop drawing.
function stopDraw(e) {
e.preventDefault();
canvas.removeEventListener("mousemove", drawIt, false);
}
Now we have come to the key function: the function to draw the line on the canvas. First thing we will do is determining the current position of the cursor. Once we have that we can draw the line with the drawLine method. Next we are visualizing the line. The main things we need to do is call the stroke to paint the line on the canvas. And, if you do not close and start a new path the stroke will get applied again to all lines since beginPath was called. The last thing we need to do is updating the start point to the current position of the mouse.
function drawIt(e) {
var point = getCursorPosition(e);
drawLine(startpoint.x, startpoint.y, point.x, point.y);
context.stroke();
context.closePath();
context.beginPath();
startpoint = point;
}
In the drawLine function we set the color of the line and determine first the position from where we want to draw the line (moveTo), next we determine where to we want to draw the line (lineTo). Optionally you can set the width of the line and the cap style of the pen.
function drawLine(fromx, fromy, tox, toy) {
context.strokeStyle = "red";
context.moveTo(fromx, fromy);
context.lineTo(tox,toy);
context.lineWidth = 1;
context.lineCap = "round";
}
Clearing the drawings on the canvas can easily been done by resetting the width of the canvas and so forcing it to redraw nothing.
function clearCanvas() {
canvas.width = canvas.width;
}
