Create HTML5 Canvas Drawing Board Within 5 Minutes!

Welcome to “Create HTML5 Canvas Drawing Board Within 5 Minutes!” tutorial. We are going to create a drawing board using HTML5 Canvas API. This is an easy to follow tutorial, and I’ll try not to lose anyone, though, I promise. If you’re not entirely sure what HTML5 Canvas is, please read HTML5 Canvas For Absolute Beginners, before you continuing this tutorial.

Please check out the demo before we start our tutorial.

View Demo

HTML Structure

Ok, let’s start our tutorial by creating a div named “board” which will contains a canvas element and a color picker dropdown box. The canvas element will contains an id named “myCanvas” and 500px as value for its height and width property; Same to the color picker dropdown box, each child elements of color picker dropdown box contains an id, which allows us to access it later via JavaScript.

<!DOCTYPE html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>HTML5 Canvas Drawing Board | onlyWebPro.com</title>
</head>
<body>
   <div id="board">
      <canvas id="myCanvas" width="500px" height="500px">
         Sorry, your browser doesn’t support canvas technology.
      </canvas>
      <p>
         Color picker: 
         <select id="selectColor">
            <option id="colBlack" value="black" selected="selected">Black</option>
            <option id="colRed" value="red">Red</option>
            <option id="colBlue" value="blue">Blue</option>
            <option id="colGreen" value="green">Green</option>
            <option id="colOrange" value="orange">Orange</option>
            <option id="colYellow" value="yellow">Yellow</option>
         </select>
      </p>
   </div>
   <!– END board –>
</body>
</html>

CSS Styles

The CSS for this tutorial is simple and easy, following is how the CSS codes looks like:

<style>
body {
  margin: 0;
}

#board {
  margin: 0 auto;
  width: 500px;
}

#myCanvas {
  border: 3px dotted #000;
}
</style>

First of all, we have to offset the body’s margin; horizontally center the div with named “board”; and apply 3px width of border to the canvas element.

The JavaScript

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script type="text/javascript">
  window.onload = function() {
    var myCanvas = document.getElementById("myCanvas");
    var curColor = $(‘#selectColor option: selected’).val();
    if (myCanvas) {
        var isDown = false;
        var ctx = myCanvas.getContext("2d");
        var canvasX, canvasY;
        ctx.lineWidth = 5;

        $(myCanvas)
            .mousedown(function(e) {
                isDown = true;
                ctx.beginPath();
                canvasX = e.pageX– myCanvas.offsetLeft;
                canvasY = e.pageY– myCanvas.offsetTop;
                ctx.moveTo(canvasX, canvasY);
            })
            .mousemove(function(e) {
                if (isDown != false) {
                    canvasX = e.pageX– myCanvas.offsetLeft;
                    canvasY = e.pageY– myCanvas.offsetTop;
                    ctx.lineTo(canvasX, canvasY);
                    ctx.strokeStyle = curColor;
                    ctx.stroke();
                }
            })
            .mouseup(function(e) {
                isDown = false;
                ctx.closePath();
            });
    }


    $(‘#selectColor’).change(function() {
        curColor = $(‘#selectColor option: selected’).val();
    });

};
</script>

Here is the section where we convert our canvas into a drawing board. First of all, please include the jQuery library into our HTML document. You can either download the library from jquery.com or use Google hosted jQuery library.

Next, we will have a window.onload event to executes all the codes when the window has loaded. We will check whether the canvas element is exist or supported by the browser or not, if yes then our canvas will start listen to the user’s mouse activity via “mousedown“, “mousemove” and “mouseup” events.

As you can seen above, there is a variable called “isDown“. This variable is used to store the current status of the mouse click. The boolean value of “isDown” variable is set to TRUE when the mouse click is down and will set to FALSE when the mouse click is up. Besides that, we also prepare a variable called “curColor” to store the color that picked by the user using color picker dorpdown box.

Save your document, run it in canvas supported browser and start to draw something on your canvas drawing board!

View Demo