So I upgraded to IE9 and continued exploring HTML5. Now there’s this ‘thing’ called Canvas in HTML5 with which you can do some cool stuff. Alright what IS this Canvas thing anyways?
The Web Hypertext Application Technology Working Group says this: “The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on
the fly.”
The Canvas element has two only attributes – width and height and when not specified they take up
the default values of 300 and 150 respectively. Below is what my HTML file looks like: 1: <!DOCTYPE html>
2: <html lang="en-US">
3: <head>
4: <script type="text/javascript" src="CustomScript.js"></script>
5: <script src="jquery-1.4.4.js" type="text/javascript"></script
6:
7: <title>Draw on a webpage</title>
8: </head>
9: <body>
10: <canvas id="canvas" width="500" height="500"></canvas>
11: <br />
12: <input type="submit" id="submit" value="Clear" />
13: <h4 id="currentPosition">
14: 0, 0
15: </h4>
16: <div id="mousedownCoords"></div>
17: </body>
18: </html>
In case you’re wondering, this is not a MVC or any kind of web application. This is plain ol’ HTML even though I’m writing all this in VS 2010.
You see this is a very simple, ‘gimmicks-free’ html page. I have declared a Canvas element on line 10 and a button on line 11 to clear
the drawing board. I’m using jQuery / JavaScript show
the current position of
the mouse on
the screen. This will get updated in
the ‘currentPosition’ <h4> tag and I’m using
the ‘mousedownCoords’ to write all
the places where
the mouse was clicked.
This is what my page renders as:
The rectangle with a background is our canvas.
The coloring is due to some javascript (which we’ll see in a moment).
Now let’s get to our CustomScript.js file.
1: jQuery(document).ready(function () {
2: var isFirstClick = true;
3: var canvas = document.getElementById("canvas");
4: // getContext: Returns an object that exposes an API for drawing on
the canvas
5: var canvasContext = canvas.getContext("2d");
6: fillBackground();
7:
8: $("#submit").click(function () {
9: clearCanvas();
10: fillBackground();
11: });
12:
13: $(document).mousemove(function (e) {
14: $('#currentPosition').html(e.pageX + ', ' + e.pageY);
15: });
16: $(document).mouseup(function (e) {
17: // on
the first click
18: // set
the moveTo
19: if (isFirstClick == true) {
20: canvasContext.beginPath();
21: canvasContext.moveTo(e.pageX - 7, e.pageY - 7);
22: isFirstClick = false;
23: }
24: else {
25: // on subsequent clicks, draw a line
26: canvasContext.lineTo(e.pageX - 7, e.pageY - 7);
27: canvasContext.stroke();
28: }
29:
30: $('#mousedownCoords').text($('#mousedownCoords').text() + '(' + e.pageX + ',' + e.pageY + ')');
31: });
32:
33: function fillBackground() {
34: canvasContext.fillStyle = '#a1b1c3';
35: canvasContext.fillRect(0, 0, 500, 500);
36: canvasContext.fill();
37: }
38:
39: function clearCanvas() {
40: // wipe-out
the canvas
41: canvas.width = canvas.width;
42: // set
the isFirstClick to true
43: // so
the next shape can begin
44: isFirstClick = true;
45: // clear
the text
46: $('#mousedownCoords').text('');
47: }
48: })
The script only looks long and complicated, but is not. I’ll go over
the main steps.
Get a ‘hold’ of your canvas object and retrieve
the ‘2d’ context out of it. On mousemove event, write
the current x and y coordinates to
the ‘currentPosition’ element. On mouseup event, check if this is
the first time
the user has clicked on
the canvas.
The coloring of
the canvas is done in
the fillBackground() function.
We first need to start a new path. This is done by calling
the beginPath() function on our context.
The moveTo() function sets
the starting point of our path.
The lineTo() function sets
the end point of
the line to be drawn.
The stroke() function is
the one that actually draws
the line on our canvas.
So if you want to play with
the demo, here’s how you do it. First click on
the canvas (nothing visible happens on
the canvas).
The second click draws a line from
the first click to
the current coordinates and so on and so forth.
Click on
the ‘Clear’ button, to reset
the canvas and to give your creativity a clean slate. Here’s a sample output:
Happy drawing!
Verdict: HTML5 and IE9 – I think we’re on to something big and great here!
