Like a lot of programmers, I've begun to wonder what all the fuss is about regarding HTML5. Casting about, I found Mark Pilgrim's fantastic tutorial on HTML5, appropriately titled "Dive into HTML5". I've been mucking with the canvas element, testing out the basics, and I put together a small web page showing a very simple random but colorful "box" generator.

There's nothing particularly "interesting" about the drawing code, other than the simple fact that there's a drawable object directly in HTML. I have heard of SVG (scalable vector graphics), but that never caught my fancy. SVG is ultimately vector-based, versus the pixel-level control offered by the canvas. That kind of drawing reminds me of the stuff I did for Tetris.

For my box generator, the bulk of the code is in this one JavaScript function:

var d_canvas = document.getElementById("d"); var d_context = d_canvas.getContext("2d"); // Draw 10 boxes at a time function draw_boxes() { var counter = 0; while (counter < 10) { d_context.fillStyle = randomColor(); d_context.fillRect( get_random(d_canvas.width), // x get_random(d_canvas.height), // y get_random(30), // width get_random(40)); // height counter++; } }

But visit my first HTML5 canvas demo page yourself, and view the source. There's a lot that can be done with the new canvas tag. I think it's cool that I can do some basic 2D graphics in nothing more than my browser and JavaScript!