Quick verdict? It’s fun.
The long verdict (albeit one not base on the work I did here?) The accessibility concerns are valid and will need to be addressed before we end up with a replay of Flash circa 2000. And no one wants that.
Anyway, the example I did do for the demo is actually one of the use cases imagined when the Canvas element was introduced. I took a simple data table and turned it into a simple chart. This is obviously not the most complicated, impressive example of the technology, but it’s an easy one to digest so it’s a perfect way to highlight the technology as part of a 45 minute presentation. Especially since I’ve got to run through another five or six features of the spec.
Anyway, here’s the example.
Here’s some code.
The HTML is very simple. The new Canvas element is the only interesting part and without JavaScript all it does is just sit there.
<table id="data-table">
<tr>
<td>15</td>
<td>25</td>
<td>10</td>
<td>25</td>
<td>50</td>
</tr>
</table>
<button id="canvas-controller">Chart It!</button>
<canvas id="canvas-sample" width="350" height="200">
</canvas>
Here’s the JavaScript. Comments inline.
document.getElementById("canvas-controller").addEventListener("click", writeCanvas, false);
function writeCanvas(e){
//we need a reference to the canvas. Typical DOM stuff
var canvas = document.getElementById("canvas-sample");
//Then we get the "context." It's the reference to the drawing surface.
//There is not 3d yet. I can't imagine there wouldn't be some day
var context = canvas.getContext("2d");
//get the data cells
var tds = document.getElementById("data-table").getElementsByTagName("td");
//set up a list of colors. I could have calculated some colors
//or something, but I was more focused on the canvas
//element itself than being fancy with the charting stuff.
var colors = ["#3366FF",
"#6633FF",
"#003DF5",
"#002EB8",
"#66FF33"
];
//Let's draw some grid lines
//this is basically right out of the dive into html5 demo
for (var y = 0; y < canvas.offsetHeight; y += 10) {
//moveTo and lineTo are pretty clearly named functions.
//move the "point" to a new place
context.moveTo(0, y);
//and plot a line
context.lineTo(canvas.offsetWidth, y);
}
//what's not clear is that running the above commands doesn't
//actually draw anything. These next two commands do
//set a style for line "stroke"
context.strokeStyle = "#ccc";
//and then call the function that makes the lines happen
context.stroke();
//set a bunch of variables
var basewidth, spacing, width, height, posx, posy;
//loop through- this is a reversed loop, just because
//I want to actually code this faster pattern
//a regular (for = 0; i<test; i++) would work just as well
for (i = tds.length - 1; i >= 0; i--) {
//calculate a uniform "base" width for the bars
basewidth = canvas.offsetWidth/tds.length;
//set up some spacing
spacing = basewidth/4;
//calculate the actual width of the bars
width = basewidth - spacing;
//set up a height. This isn't actually to any scale.
//It just looked good :)
height = parseInt(tds[i].innerHTML)*3;
//calculate the x position with some spacing between the bars
posx = (i * basewidth) + spacing/2;
//pin the bars to the bottom of the canvas
posy= canvas.offsetHeight-height;
//set the color
context.fillStyle = colors[i];
//and then fill it. The fillRect takes (x,y,width,height) as arguments
context.fillRect(posx, posy, width , height );
}
//stop the clicks.
e.preventDefault();
}
And there you have it. All things considered it’s a clearly written, powerful interface. If they can sort out the accessibility issues and if we don’t go mad with power it’ll end up being a great benefit to web developers for years to come.