HTML5 Web Application Development By Example Beginner's guide

Time for action – adding a line tool

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 ...