You can find the code for this section in
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 ...