I’m developing an in house project called Project Timer, it’s essentially a client-server application that helps me keep track of the amounts of work I put into projects. Like most statistics applications it needs to display graphs, when the first version was developed I naturally used tables cause I didn’t want to make it too server specific. When I saw a lot of news about HTML5 and Canvas, I couldn’t help to think that I should be using it.
Since this is my personal application that is basically a Google Chrome extension I shouldn’t have to worry about other browsers not supporting it. So I wanted to learn how Chrome’s implementation of Canvas works, well they didn’t seem to have it documented but they referred to a Mozilla link, which was nice because it looks like there is really not much difference.
First thing to do is to create a Canvas tag, which looks like this:
<canvas id="mycanvas" width="550" height="250"></canvas>
It’s very simple, and it generally works like an image tag, but it only occupies space until we script it. Note that it has a close tag(required in Firefox, optional everywhere else) which can contain alternative content for lesser browsers that don’t support this tag.
To actually make use of this tag we have to get a reference to it from the DOM like any other element.
var canvas = document.getElementById("mycanvas");
Now that we have the element we need to specify the context we like to use it in:
var ctx = canvas.getContext("2d");
The drawing context we most likely to be using is 2D, later on we could probably draw in 3D too. As expected we do the drawing operations trough the context which has some really sensible operations like save() and restore(), where save() backs up the current state and restore() restores it. This is really ideal because this enables us to create reusable code that won’t break the state of the outer code.
A simple example for this:
//some code before ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; ctx.save(); ctx.font = "9px 'arial'"; ctx.fillStyle = "#000"; ctx.globalAlpha = 1.0; ctx.fillText('text',0,0); ctx.restore(); //some code after
This example shows that we can simply hit save() do almost anything we want, hit restore, and the outer code won’t even notice we were there. This is a really clean way of drawing things, it saved me the trouble to do the state preservation manually.
Since I needed to do a simple graph I only used a few drawing operations:
fillText(text,x,y) – draws text starting from x,y
fillRect(x,y,width,height) – fills a rectangle starting from x to x+width, and from y to y+height
And of course the following for drawing lines:
beginPath()
moveTo(x,y)
lineTo(x,y)
closePath()
stroke()
To draw lines we basically create paths and either stroke() or fill() them, like this:
ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(50,60); ctx.closePath(); ctx.stroke();
This is just a small subset of Canvas, there are a lot of cool features I didn’t try out yet, there are a lot of cool applications already written with this technology at ttp://www.canvasdemos.com/.
The single bad thing is that lesser browsers do not support this, but I had an idea that it can be (poorly?) emulated using Adobe Flash, and it looks like other people or having similar ideas. So it looks like we are about to see very interesting new web applications.
Pingback: HTML5 Canvas can work even in Internet Explorer 6