Drawing on a webpage – HTML5 - IE9

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:

image

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:

image

Happy drawing!

Verdict: HTML5 and IE9 – I think we’re on to something big and great here!

Published Wednesday, March 16, 2011 2:26 AM by nmarun
Filed under: , , ,

Comments

# re: Drawing on a webpage – HTML5 - IE9

Tuesday, May 15, 2012 1:21 PM by Jhanu

As someone very irttneseed in both web and game development, I am very irttneseed in seeing your presentation! I know at last year's FSOSS, all presentations were recorded and then uploaded  any chance a video of your presentation will be going online?

# re: Drawing on a webpage – HTML5 - IE9

Wednesday, May 16, 2012 9:47 PM by Ayman

Great effect but could the rioottan be bound to a mousemove event so the image rotated to follow the mouse around the page without any dragging?I'm trying to get a compass needle image to track the cursor

# re: Drawing on a webpage – HTML5 - IE9

Saturday, November 30, 2013 1:14 AM by SheoNarayan

Here is an article that explains start to end solution of creating a Drawing board using HTML 5 Canvas.

www.dotnetfunda.com/.../creating-a-paint-brush-drawing-board-app-using-canvas-in-html5

Hope this will be helpful.

Leave a Comment

(required) 
(required) 
(optional)
(required)