JS Boolean var doesn't affect if-statements

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.

Answer 2

Variable & Method name are same rect & rect(). JavaScript does n't support same name variable and function that's why the value of rect variable override by the rect() function and always returns true but your expectation is false. Change either variable or function name of rect.