Natasha The Robot

Currently learning... iOS development!                                             You can follow me on Twitter here

Draw Something Awesome: Playing With HTML5 Canvas, JavaScript, And JQuery

Posted on

While the basic syntax of JavaScript is important to learn, I’ve found it frustrating that I don’t understand how to apply what I’ve learned so far to actually building something. So last week, I asked Hani Sharabash of Bloc.io to build something simple with me. We came up with a very simple drawing application that uses the new HTML5 canvas element, JavaScript, and JQuery. Here is how we built it:

HTML5 Outline

We started by adding the basic (and more simple) HTML5 components to the page:


<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="/assets/stylesheets/drawing.css">
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<canvas class="drawing-area" width="500" height="500"></canvas>
	</body>
</html>

If you’ve worked with HTML before, you’ll notice how much simpler some of these basic components are now with HTML5.

I’ve also added a shim in the head element for making sure that the HTML5 components are compatible with some of the earlier versions of Internet Explorer.

HTML5 Canvas

We then added a canvas element in the body section of our HTML5 code.

<canvas class="drawing-area" width="500" height="500"></canvas>

This adds a 500 * 300 canvas to the our page, which we will use for drawing on. To put a box around the canvas, so it’s easier to see, we added styled our drawing area with a border.

/* /assets/stylesheets/drawing.css */
.drawing-area {
	border: 1px solid black;
}

Including JQuery

To include the JQuery library, we simply added this line in the head element of our HTML:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Apparently Google hosts some popular developer libraries, which load really fast in the browser. Check out all their libraries here.

Now, The Fun Part

The simplest thing to draw is one point, so that is what we started with. We looked at the W3 Schools example javascript canvas code and adapted it using JQuery as follows:

// /assets/javascript/drawdot.js

//we wrapped our code in a function so it only loads when the user loads the page where our code is used
$(function() {

        //the drawdot function draws a 5 * 5 pixel rectangle of the specified color at the specified x and y location
	var drawDot = function(context, color, x, y) {
		context.fillStyle = color;
		context.fillRect (x, y, 5, 5);
	}

        // we define the canvas and context based on the instructions from w3 schools
	var canvas = $(".drawing-area")[0];
	var context = canvas.getContext("2d");

        //we want to draw when the mouse is dragged, which means it is clicked and moving at the same time. The below 2 functions track when the mouse is clicked.
	var mouseclicked = false

	$(".drawing-area").mousedown (function(e) {
		mouseclicked = true;
	});

	$(".drawing-area").mouseup (function(e) {
		mouseclicked = false;
	});

        // when the mouse if moving and is clicked, we get the x and y position of the mouse pointer and pass in that information and our color to the drawDot function to start drawing!
	$(".drawing-area").mousemove (function(e) {
		if(mouseclicked === true) {
			var x = e.pageX;
			var y = e.pageY;
			drawDot(context, '#BADA55', x, y);
		};
	});

});

Final Code

If you’d like to see the final functioning version of this code, check it out on GitHub. The main code is in the index.html file with the style and javascript files in the assets folder. You can also play with the final product on the draw something awesome heroku app.

Happy Drawing!