How to create a simple drawing board in HTML5?
This article explains how to build a simple web based drawing board in html.
HTML Structure
<!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>
We have a div named “board” which 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.
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>
This is where all the magic happens. Here we convert our canvas into a drawing board. Include the jQuery library in the 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 execute all the when the window has loaded. We will check whether the canvas element exists and 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 have a variable called “curColor” to store the color that picked by the user using color picker dorpdown box.
After adding some light css, the full code:
Voila! You have created your own drawing board :)
