Time for action – making a local drawing whiteboard with the Canvas

Carry out the following steps:

1. We will focus only on the client side in this section. Open the index.html file and add the following canvas markup:

   <canvas id='drawing-pad' width='500' height='400'>
   </canvas>

2. We will draw something in the Canvas and we will need the mouse position relative to the Canvas for this. We did this in Chapter 4, Building the Untangle Game with Canvas and the Drawing API. Add the following style to the Canvas:

   <style>
     canvas{position:relative;}
   </style>

3. Then, open the html5games.websocket.js JavaScript file to add the drawing logic.
4. Replace the websocketGame global object with the following variable at the top of the JavaScript file:

   var websocketGame = {
      // indicates if it is drawing now.
      isDrawing : false,
   
      // the starting point of next line drawing.
      startX : 0,
      startY : 0,
   }
   
   // canvas context
   var canvas = document.getElementById...