A Brief Introduction

The HTML5 canvas element is gaining lots of popularity as of late, largely in part of its potential to replace Adobe’s heavy hitter “Flash” for animations and interface design. In our previous tutorials, we saw how to draw simple shapes to the canvas element, as well as how to perform simple animations on a shape in our canvas. This tutorial will demonstrate how to allow the user to paint on your canvas dynamically – creating very basic paint application.

Getting Started

We’re going to be using the boilerplate.html page found in the download folder that came with this tutorial as a basis for our project. This page contains the necessary markup for an HTML5 page, along with a canvas element predefined within the body. The page is also linked to two JavaScript files.

The first is “Jquery.js”, which can be obtained from Jquery.com, and the second is “paint.js”. We’ll be writing all of our code in the paint.js file, which can also be found in the folder that came with the tutorial. Let’s add some code to that file now.
Adding the Code

At this point, the paint.js file is just an empty JavaScript file. However, since we’ve linked our boilerplate.js file to both paint.js and Jquery-1.4.1.js, our paint.js file has complete access to all of the handy methods that Jquery has to offer. This will make traversing the elements of our document easy, and will require less typing as well.

The first thing we’ll do is create a $(document).ready() function, because all Jquery code is written within one. Add the following line of code to the paint.js file:

All of the rest of our code will be placed inside of the area shown above. This is a good thing because Jquery is making sure that our entire document is loaded before it goes through our page looking for elements. You wouldn’t want to call for a <div> element that wasn’t yet loaded, right?

Now, let’s add the variables that we need for our paint application. We’ll need a variable to reference the canvas element on our page. We’ll also need another variable to reference the context of the canvas, and yet another to reference the whether or not the user is currently drawing. Add the following variable declarations into the $(document).ready() function:

The next step will be to set the properties of the line we’ll be drawing onto our canvas. There are several properties you could use, but the only one we’re interested in for now will be the strokeStyle property. This will simply set the stroke of our line to a color of our choice. In this case, I’ve set the property equal to a turquoise-blue color, but you can use whatever color you’d like. You can use a standard color name like “black” or you could use a hexadecimal value like “#000000”. Add the following line of code beneath the variable declarations:

Now, the user is only considered to be “drawing” if the mouse is held down while inside of our canvas. Jquery has two built in functions – “mousedown” and “mouseup” – that will help us to capture these events, and to perform actions when they occur. When the user performs the mousedown action, we’ll set the drawing variable to false. When the user lifts the mouse button up, we’ll set it equal to true. Add these next few lines of code to accomplish this:

The last event that we need to capture will be when the user moves the mouse. This is easily captured by using Jquery’s “mousemove” function. As long as drawing is true when the user moves the mouse, we’ll begin drawing the line based on the mouse’s current position. Here’s the full mousemove function.

Go ahead and enter the code as below, and I’ll attempt to explain bit-by-bit what it’s actually doing:

Basically, the above function says that when the user moves the mouse – if they are drawing – start manipulating the context. The” linewidth” value is the width of the line the user is drawing. The “linecap” property specifies how the end of the line will look. It can be either square, round, or butt.

The default is butt.
Context.beginPath() says that we’re about to begin creating a new path within the canvas. Moveto takes an xand a y value, and in our case, we’ll be moving to wherever the mouse is on the page (e.pageX , e.pageY), minus the offset of the mouse pointer relative to the canvas.

The lineTo property takes an x and y value also, and specifies where on the page our line will be connected. In our case, it’s connected to the current position of the mouse.
That’s it! We’ve now built a simple paint application in HTML5. To test it out, double-click on the boilerplate.html file to open it in a browser. Now place your mouse inside of the dotted canvas and draw away!

Final Thoughts

Creating a paint application is a fun way to explore the capabilities of the HTML5 canvas element, and is a good starter project for building a bigger; better paint app. Getting a hang of Jquery (or any JavaScript library for that matter) will make you more proficient in HTML5 since the two languages typically go hand and hand.

Download Source Files