O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required