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