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!