Introduction

Step 1: a very simple, minimal, paint!

Step 3: add a second, transparent canvas on top of the main canvas, for drawing elastic lines

Go into the step 3 directory. You may  try the example by opening paint.html in your browser.

This example shows an interesting use of canvases: they can be layered one on top of another. Using a CSS relative position and the  z-index CSS property with different values, they can act as layers in photoshop. By default they are transparent, and if you use the context.clearRect(x, y, width, height) function you will make a transparent rectangle and be able to "see through" it.

We will use this feature to draw an elastic line (lines that follow the mouse position) on a transparent front canvas, without modifying the main canvas behind.

In order to animate the line when the mouse moves, we clear the front canvas before drawing a line in its new position.

Adding a new canvas on top of the previous one

This is done in paint.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// Prepare a second canvas on top of the previous one, kind of second "layer" 
 var frontCanvas = document.createElement('canvas');
 frontCanvas.id = 'canvasFront';
 
 // Add the temporary canvas as a second child of the mainCanvas parent.
 mainCanvas.parentNode.appendChild(frontCanvas);
 
// Get the context for drawing in the canvas
var frontContext = frontCanvas.getContext('2d');
 
this.getFrontCanvas = function () {
        return frontCanvas;
}
 
this.getFrontContext = function () {
        return frontContext;
}

We added a line drawing tool in drawingtools.js

We declared an array that will hold the different drawing tools (pencil, line, etc):

1
2
3
4

var DEFAULT_TOOL = 'pencil';
...
// Create the drawing tool
var drawingTool = new setOfDrawingTools[DEFAULT_TOOL]();

And the event binding has been modified in order to call the current drawing tool mouse listener method :

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// bind events. We use a function multiplexEvent that will call the proper listeners
// methods of the currentTool.
this.bindMultiplexEvents = function () {
    $("#canvasFront").mousedown(this.multiplexEvents);
    $("#canvasFront").mousemove(this.multiplexEvents);
    $("#canvasFront").mouseup(this.multiplexEvents);
}
 
// if currentTool is pencil, and event.type is mousemove, will
// call pencil.mousemouve(event), if currentTool is line and
// event.type is mouseup, will call line.mouseup(event) etc.
this.multiplexEvents = function (event) {
    drawingTool[event.type](event);
}

...notice that in the line drawing tool (in drawingtools.js) we draw only in the front canvas, and before any draw we clear the front canvas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// the Line Drawing Tool Object
setOfDrawingTools.line = function () {
    this.mousedown = function (event) {
        paint.started = true;
        previousMousePos = getMousePos(paint.getFrontCanvas(), event);
    };
 
    this.mousemove = function (event) {
        var mousePos = getMousePos(paint.getFrontCanvas(), event);
        if (paint.started) {
            // Clear front canvas before drawing the elastic line in a new position
            paint.getFrontContext().clearRect(0, 0, paint.getFrontCanvas().width, 
                                                    paint.getFrontCanvas().height);
 
            paint.getFrontContext().beginPath();
            paint.getFrontContext().moveTo(previousMousePos.x, previousMousePos.y);
            paint.getFrontContext().lineTo(mousePos.x, mousePos.y);
            paint.getFrontContext().stroke();
            paint.getFrontContext().closePath();
        }
    };
 
    this.mouseup = function (event) {
        paint.started = false;
    }
};

 In the paint.html file, we added some spans in order to select the current tool:

1
2
3
4
5

<div id="drawCommands">
    <h6>Pick a tool</h6>
    <span id="line">line</span>
    <span id="pencil">pencil</span>
</div>

And in paint.js we detect clicks on them:

1
2
3
4
5
6
7
8
9

// Handle the drawing tools menu. The selected entry value can be 'Pencil',
// 'Line' etc.
this.changeDrawingTool = function () {
    // this.id is the id of the selected menu item
    drawingTool = new setOfDrawingTools[this.id]();
}
 
// Bind the changeDrawingTool function onClick to every menu items.
$("#drawCommands").find("span").click(this.changeDrawingTool);

Small problem : how can we make the line stay on the drawing when we draw another line ?

Step 4: draw the front canvas on the main canvas on mouse release, when drawing lines

Go into the step 4 directory. You may try the example by opening paint.html in your browser.

This time when we release the mouse button the line is drawn and will stay in the main drawing, even if we draw other elastic lines.

Question: how to fix the previous version where lines "did not remain" when we released the mouse button ?

Answer: we just draw the front canvas on the the main canvas on mouseUp events !

In paint.js we added a drawFrontCanvasOnMainCanvas() method on the PaintObject:

1
2
3
4
5

this.drawFrontCanvasOnMainCanvas = function () {
    mainContext.drawImage(frontCanvas, 0, 0);
    // after copying the front canvas content, we clear it !
    frontContext.clearRect(0, 0, frontCanvas.width, frontCanvas.height);
}

Notice that we use a drawImage() call from a canvas context object. Indeed, we can draw a canvas on a canvas!

And we call this method from the mouseUp() listener method of the line drawing tool:

1
2
3
4
5
6
7
8

// The Line Drawing Tool Object
setOfDrawingTools.line = function () {
    ...
    this.mouseup = function (event) {
        paint.started = false;
        paint.drawFrontCanvasOnMainCanvas();
    }
};

Step 5: adding a rectangle and a Circle tool

Go into the step 5 directory. You may try the example by opening paint.html in your browser.

This time, the same way we did the line tool, we added two new tools: one for drawing elastic rectangles and one for drawing elastic circles.

You may look at these tools in drawingtools.js.

Now that we have a small framework, you can try to add your own tools for drawing ellipses, images etc. (NOTE: this is part of the assignment for this chapter)

Step 6: playing with stroke and fill styles, lineWidth, HTML5 new input types (color, range)