Question

I’m doing an HTML5 canvas painter, with options to draw, place rectangles, circles and different color options.
My problem is that i originally had a var tool with the default value “pencil”, and i wanted to change this variable to “rect” (didn’t start with the circle yet, since i wanted to make this work first) with clicking on the respective div so that i could have an if-statement for either drawing, rectangles or circles. This didn’t work though, and i singled the variable out, since i got an alert i placed in the onclick-function.
After that i tried using boolean variables (pencil = true, rect = false, would have been one “state”) but that doesn’t work either. I do have the if-statements already written down, so my conclusion right now is that i somehow have the booleans as constants (since pencil = true is my default state for the var), which seems unlikely. The more logical explanation is that i am not correctly changing the value of the variable with the div-click.

Here’s the part of my code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var color = "black";
var drawing = false;
var pencil = true;
var rect = false;



//Pencil
var pencilDiv = document.getElementById("pencil");
pencilDiv.onclick = function () {
  pencil = true;
  rect = false;
}

//Rect
var rectDiv = document.getElementById("rect");
rectDiv.onclick = function () {
  rect = true;
  pencil = false;
}

if (pencil) {
  canvas.onmousedown = function (event) {
    drawing = true;
  }

  canvas.onmousemove = function (event) {
    if (drawing) {
      draw()
    }
  }

  canvas.onmouseup = function (event) {
    drawing = false;
  }
}

if (rect) {
  canvas.onmousedown = function (event) {
    rect()
  }
}

Both the draw and rect function work. I also tried if(pencil == true && rect == false), doesn’t work either.

Sorry if the answer is obvious and i just don’t see it, this is the second time im programming in Javascript.

Thanks in advance!

Answer 1

You’ve written the code as if the assignment of the mouse event handlers is re-done implicitly each time conditions change. That’s not the way it works. You should simply re-assign the handlers inside event handlers for the drawing controls, because that code will be run on each “click” event.

For example:

pencilDiv.onclick = function () {
  canvas.onmousedown = function (event) {
    drawing = true;
  }

  canvas.onmousemove = function (event) {
    if (drawing) {
      draw()
    }
  }

  canvas.onmouseup = function (event) {
    drawing = false;
  }
}

rectDiv.onclick = function () {
  canvas.onmousedown = function (event) {
    rect()
  }
  canvas.onmousemove = canvas.onmouseup = null;
}

Alternatively, you could have the code of the mouse event handlers check the flags, thus avoiding the need to reassign the event handlers on each control “click” event.