Mouse Draw on Canvas

To create a canvas in a browser to draw on, we created a piece of code using HTML and JavaScript. I will be annotating each chunk of code bit by bit below. Click here to try the full application in a browser.

How Does It Work?

<canvas id="myCanvas" width="400" height="400" onclick="toggleDraw(event)" onmousemove="drawLine(event)"></canvas>

This defines the canvas’ id along with the width and height of the space in which the user will be able to draw. The onclick function is assigned to the event toggleDraw(event) and onmousemove function is assigned to drawLine(event). Next, the <script> tag is defined and this defines JavaScript code.

var doDraw = false;

doDraw is now defined as a variable and is set to false. This ensures that when the page is loaded on a browser, the user can still use their mouse freely without drawing a line. I will explain this in more depth later on.

var c = document.getElementById("myCanvas")
c.width = window.innerWidth;
c.height = window.innerHeight;

I now need to create a canvas to draw on and have done this by defining a variable called c which is attached to the id called myCanvas. To make sure that the canvas always loads to the full width of window, c.width and c.height  is assigned the predetermined JavaScript properties window.innerWidth and window.innerHeight. 

var ctx = c.getContext("2d")
ctx.fillStyle = getRandomColour();
ctx.fillRect(0, 0, c.width, c.height);
ctx.lineWidth = 5;

After this I needed to define the style of the line that is going to be drawn. The variable ctx  is defined as 2D (as opposed to if we were drawing in a 3D environment). ctx.fillstyle is assigned to the function getRandomColour() but this is explained in more detail later on. ctx.fillRect  is explaining that the fill colour will start at point 0 on the X-axis and point 0 on the Y-axis (top left of the window) and to stretch to the inner height and width of the window. ctx.lineWidth is setting the width of the line that is going to be drawn to 5 pixels.

function toggleDraw(event) {
     doDraw = !doDraw;
     //console.log("doDraw = " + doDraw);
     if (doDraw) {
         ctx.beginPath();
         ctx.moveTo(event.clientX, event.clientY);
         ctx.strokeStyle = "#000000";
     } else {
         ctx.closePath();
     }
 }

 function drawLine(event) {
     //console.log("drawLine event = " + event);
     if (doDraw) {
         ctx.lineTo(event.clientX, event.clientY);
         ctx.stroke();
     }
 }

The document’s first function has now been defined and it is assigned to toggleDraw, which was assigned to the onlick event as explained in the first paragraph. Next, doDraw = !doDraw means that when and only when this function is executed, doDraw will do the opposite of the original variable definition which was false. If the original variable was defined as true, when the user first loads the page it will automatically think to start drawing. This is shown in the example GIF below:

Following this, there has to be an if/else statement included to make the mouse drawing more responsive. If doDraw is true and the user clicks on the page, ctx (the line variable I created earlier) will beginPath and makes a mark at each point of the X and Y axis, creating a black line where the mouse has been. However, if doDraw is false, the mouse will not make a mark on the canvas.

Another function has been assigned to an event in the first paragraph of this article and that is fucntion drawLine(event).  This function dictates that if doDraw is true then to execute the event drawLine when the mouse moves (onmousemove). The same thing happens as toggleDraw where there will be a line created where the mouse is clicked and moved around the screen, but when the mouse is clicked again and this statement becomes false, the mouse will stop drawing a line.

 
function getRandomColour() {
     var str = "#";
     //Black #000000 White #FFFFFF
     var chars = "0123456789ABCDEF";
     for (var i = 0; i < 6; i++) {
          //console.log("Math.floor(Math.random() * 16) = " + Math.floor(Math.random() * 16));
          str += chars[Math.floor(Math.random() * 16)];
     }
     return str;
 }