Building a drawing app with HTML5's canvas (Part 1)

In the previous post, we learned to use the arc function in the canvas API for HTML5. If you haven't, please go ahead and read the article, because it's going to be really useful for this tutorial series on building a drawing app for web browsers. Which obviously can be converted to an android app using the technique mentioned in one of our old posts.

So, in this post, we'll just introduce the project and start with the project to build a basic version of our drawing app.
 

Here's our final product after all the parts in this series

View Demo

Introduction to the Canvas Drawing App project

In this project, we'll build an app, like the one in the above figure. That can draw stuff on the click of a mouse.

Building our Canvas

Let's go ahead and define our canvas in our HTML.

<canvas id="canvas">Your browser is unsupported!</canvas>

Well, the above line basically says, "Create a canvas element with an id 'canvas' and if the browser doesn't support canvas, we'll just say 'Your browser is unsupported!'..."

Working with JavaScript for our canvas drawing app

Now, let's reference all our elements, and by all I mean one (canvas). Also, we'll create a context variable for drawing stuff on the canvas.

For those of you who don't know what a context variable is, it's basically an object using which we draw stuff on the canvas. We can use a 3D or a 2D context. For this example, we'll use 2D canvas.

Here's the syntax for getting the context of a canvas:

var ctx = canvas.getContext([2d/3d]);

Where [2d/3d] is a string that specifies a 2D or a 3D context.

Let's also create a variable called radius that stores a value that will be used as the radius of every point that we draw on the screen. This will sort of function as a "brush width".

So, here's what your code should look like:

var canvas  = document.getElementById('canvas');
var context = canvas.getContext("2d");
var radius  = 10; 

We'll now set the width & height of the canvas to the windows width by using the window.innerHeight and the window.innerWidth properties and remove the margin of the body.

canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;
document.body.style.margin = 0;

Now we'll add an eventListener that responds to the click event on the canvas element and calls a function called pt() when the event is triggered.

canvas.addEventListener("click", pt);

Let's build the pt function. Well, the pt function takes in one parameter- e. The same 'e' that all the event listener functions take. Please learn JavaScript if you didn't understand that. We have a JavaScript walk-through made for you.

Now, the function has to do 3 things. First, call the context.beginPath() function to tell the context that we're starting to draw stuff.

Then call the context.arc method passing in the x,y coordinates of the mouse (using e.offsetX, e.offsetY) to specify the x,y coordinates of the point (which technically is a circle); the radius (10) and the starting and ending angle (which will be 0 rad and 2π rad respectively).

Then we call the fill method which fills the point with colour.

function pt(e){
    context.beginPath();
   
    // Recall that we've defined the radius variable previously
    context.arc(e.offsetX, e.offsetY, radius, 0, Math.PI*2);
    context.fill();
}

What's up for the next parts?

As you can see in the demo, our app currently puts points wherever we click the canvas but it really doesn't draw anything. If you drag your mouse around it just puts a point where you stop dragging.

We'll handle all of that stuff in the upcoming parts of this series. Hope you understood everything in this part...