You can find the code for this section in chapter4/example4.3.

Currently we can draw freehand lines, but we don't have a way to draw a straight line from one point to another. So let's add a line drawing tool. To allow the user to select different tools we need a new drop-down menu toolbar option. Let's add it to our HTML:

<div id="toolbar">
  <div class="dropdown-menu">
    <button data-action="menu">Tool</button>
      <uldata-option="drawingTool" class="menu">
        <li data-value="pen" class="selected">Pen</li>
        <li data-value="line">Line</li>
      </ul>
    </div>

For this menu we are setting the data-option attribute to drawingTool. We add menu items for the Pen tool, which we currently have, and a Line tool, which we are implementing now. Since drawingTool isn't a property of the Canvas2D object we need to add code to check for it in menuItemClicked():

function menuItemClicked(option, value)
{
    switch (option)
    {
        case "drawingTool":
            curTool = value;
            break;
        default;
            canvas2d[option](value);
    } 
}

First we check to see which option was selected. If it's "drawingTool" we simply set the current tool to the value of the menu item that was selected. Otherwise we do the default behavior of setting the Canvas2D property with the selected value.

Next we will change the penMoved() method. We need to check which tool we are currently using. If it's the pen we add another point to the points array. Otherwise we only want to change the second point in the points array because we are drawing a straight line, and a line only has two points:

function penMoved(pageX, pageY)
{
    var canvasPoint = canvas2d.getCanvasPoint(pageX, pageY);
    showCoordinates(canvasPoint);
    
    if (drawing)
    {
        if (curTool == "pen")
        {
            // Add another point
            curAction.points.push(canvasPoint);
        }
        else
        {
            // Change the second point
            curAction.points[1] = canvasPoint;
        }
        redraw();
    }
}

Lastly we need to make some changes to the redraw() method. Inside the loop we will check the action's tool. If it's the pen we call canvas2d.drawPoints() the same as we did before. If it's the line tool we call canvas2d.drawLine() passing in the two points:

function redraw()
{
    canvas2d.clear();
    canvas2d.savePen();

    for (var i in actions)
    {
        var action = actions[i];
        canvas2d.penColor(action.color)
                .penWidth(action.width)
                .penOpacity(action.opacity);

        switch (action.tool)
        {
            case "pen":
                canvas2d.drawPoints(action.points);
                break;
            case "line":
                canvas2d.drawLine(action.points[0], 
                    action.points[1]);
                break;
        }
    }
    canvas2d.restorePen();
}

Wait a minute! We don't have a drawLine() method in the Canvas2D object yet. So let's go add it:

this.drawLine = function(point1, point2)
{
    context.beginPath();
    context.moveTo(point1.x, point1.y);
 context.lineTo(point2.x, point2.y);
    context.stroke();
    return this;
};

The drawLine() method takes the line start and end points as parameters. After beginning a new path it moves to the first point, draws a line to the second point, and then strokes it. That's it. Now we can draw straight lines.

Drawing rectangles

You could draw a rectangle using paths, but the canvas API has a couple built in methods to do this; drawRect() and fillRect(). They both take the same parameters; x, y, width, and height. drawRect() uses the strokeStyle to draw the lines and fillRect() uses the fillStyle to fill it.

The following draws a rectangle starting at the point (350, 10) with a width of 50 and a height of 90:

context.strokeRect(350, 10, 50, 90);

This example draws a filled rectangle starting at the point (425, 10) with a width of 50 and a height of 90:

context.fillRect(425, 10, 50, 90);