In this article we add some convenience functions to let the user know:
- What shape they’re drawing
- What step of drawing the shape they’re in
Showing the Mode
First add the area where we’ll be showing the user what shape mode they’re in. Under the canvas add this line:
<b>Mode:</b> <span id="mode"></span><br />
Now add this method to the Canvas object:
displayMode() {
const modeDiv = document.querySelector('#mode');
modeDiv.innerHTML = this.mode;
}Now call it in the constructor and at the end of setMode . For example, setMode should look like this when we’re done:
setMode() {
this.mode = mode;
this.displayMode();
}With this change, the mode will first appear when the app starts (with the default of “Line”), and it’ll update when you click one of the shape buttons.
Showing the Instructions
If you just played with the app a little bit, you could eventually figure out how it works. But wouldn’t it be nice if there were some simple instructions provided by the program itself? When making the circles, for example, it’s not obvious that you pick the center, then the edge. Some users might think you should click two opposite edges of the circle. Others might think you can draw a multi-segment line. The app doesn’t do that, but it’d be a good improvement for you, the curious programmer, to add at a later time. Let’s add some handy instructions.
First, the HTML. Under the code for showing the mode, add this:
<b>Message:</b> <span id="message"></span>
In the Canvas constructor, we need to define what instructions to give the user. We’ll need an instruction for the first click of the shape, and an instruction for the second. In addition, since both circle and both rectangle modes work the same way, we can generalize the instructions by shape type.
this.shapeMessages = [
{ type: 'line', start: 'Select the starting point', end: 'Select the ending point' },
{ type: 'rectangle', start: 'Select the first corner', end: 'Select the second corner' },
{ type: 'circle', start: 'Select the middle of the circle', end: 'Select the edge of the circle' }
];Then we need a method to determine which shape type the mode is in:
getModeType(mode) {
let type = '';
switch (mode) {
case 'Line':
type = 'line';
break;
case 'Hollow Rectangle':
case 'Filled Rectangle':
type = 'rectangle';
break;
case 'Hollow Circle':
case 'Filled Circle':
type = 'circle';
break;
}
return type;
}Then the method to actually display the message:
displayMessage() {
const type = this.getModeType(this.mode);
const find = this.shapeMessages.find(m => m.type === type);
const msgDiv = document.querySelector('#message');
msgDiv.innerHTML = find[this.pointMode];
}As a refresher, this.pointMode was set up to record whether we’re on the start or end point of the shape. The displayMessage method thus finds which element of the shapeMessages array we want to use, and returns the start or end message as appropriate.
Like displayMode, this method should be called at the end of the constructor and at the end of setMode. It should also be called at the end of handleDraw, because after each click we want to update the instructions.
Putting it All Together
As shown below, the mode and message should now appear under the canvas:
As you click the buttons to choose the shape, and click on the canvas, keep an eye on the Mode and Message areas. They’ll change to reflect what you’re doing.
Here’s what the HTML and Javascript should look like at this point:
We’re getting close to adding sockets and back-end functionality to make the app collaborative. Next, though, we’re going to add a couple buttons for clearing the drawing and downloading it as an image file. We’ll cover that in the next article.
