Home » Tutorials » JavaScript » Create HTML5 Canvas Drawing Board Within 5 Minutes!

Create HTML5 Canvas Drawing Board Within 5 Minutes!

Create HTML5 Canvas Drawing Board Within 5 Minutes!

  • Stumble it!
  • Share

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


  • Enhancing Google Map Interactivity with jQuery
  • How To Create jQuery Password Strength Indicator in 10 Minutes!
  • Make A jQuery Sticky Header In 5 Minutes

  • s

    nice work

  • ouhe

    It help me a lot
    Thanks!

    • http://www.onlywebpro.com onlyWebPro

      You’re welcome! Please follow us for more up coming articles!

      If you found the article is helpful, please share it to your friends or communities.

      Regards.

  • Hugo

    Thanks for the tutorial! Im trying to use it right now, but i’ve got some problems with the .js file. I’ve got an syntax error in line 2. Which is
    ….

    Do you have any suggestions?
    Thanks in advance

    • http://www.onlywebpro.com onlyWebPro

      Syntax error? what editor are you using?

  • Sheo Narayan

    Thanks so much, it really helps.

  • Sheo Narayan

    Thanks, I have just extended a bit your article code and created a fresh new drawing board app with many more feature. http://www.dotnetfunda.com/articles/show/2701/creating-a-paint-brush-drawing-board-app-using-canvas-in-html5

    Hope you will like it.
    Credit goes to you.

    • http://www.onlywebpro.com onlyWebPro

      You have done a great job! Keep it up! Web community need alot of talent like you to contribute and moving forwards!

  • mughees ilyas

    hey i am trying to do a similar task in asp.net
    but this seems to not work
    i am new to drawing and asp.net
    can u tell me how to create a simple canvas and a polygon tool in asp.net environment ?

    • http://www.onlywebpro.com onlyWebPro

      Hi,

      Thanks for reading onlywebpro’s article. I’m so sorry that, I’m not an ASP.net developer, I couldn’t help you on that.

      Anyways, i would like to clarify that, HTML5 & ASP.net are 2 different things. HTML5 is front-end development and ASP.net was back-end development. If you want to create a similar drawing app using ASP.net technology, you may need to google the tutorial.

      Regards.

  • madhu

    how to convert image into canvas

Android, iOS Development Tutorials