Changing variable to draw on Canvas

Question

I'm having a few issues with canvas and changing a variable to assign a different mousestate. I have shown a section of my code below.

$("#shape").click(function() {  //Runs the drawbackground function on click
    mouse_state = "fill_shape";
    console.log("shape: " + mouse_state);
});

$("#paint").click(function() {  //Runs the drawbackground function on click
    console.log('hi');
    mouse_state = "paint";
    console.log("paint: " + mouse_state);
});

var mouse_state = "paint";



if (myCanvas) { //Checks is canvas exists and/or is supported by the browser
    var isDown = false;  //Stores the current status of the mouseclick, default is not down
    var ctx = myCanvas.getContext("2d"); //Stores the 2d context of the canvas
    var canvasX, canvasY;  //Initialises variables canvasX and canvasY

    if (mouse_state == "paint"){
    $(myCanvas).mousedown(function(e) { //When the user clicks on the canvas, this function runs
        e.preventDefault();  //Prevents the cursor from changing when clicking on the canvas
        isDown = true; //Sets the mouseclick variable to down
        ctx.beginPath(); //Begins the path
        canvasX = e.pageX - myCanvas.offsetLeft; //Stores the mouse position on the x axis by subtracting the distance from the left edge of the canvas from the position from the left edge of the document.
        canvasY = e.pageY - myCanvas.offsetTop; //Stores the mouse position on the y axis by subtracting the distance from the top edge of the canvas from the position from the top edge of the document.
        ctx.moveTo(canvasX, canvasY);  //Sets the position which the drawing will begin
    }).mousemove(function(e) {
        if (isDown != false) { //On the mousemouse the line continues to be drawn as the mouseclick variable will still be set as false
            canvasX = e.pageX - myCanvas.offsetLeft; //Similar to above
            canvasY = e.pageY - myCanvas.offsetTop;
            ctx.lineTo(canvasX, canvasY); //Stores the information which should be drawn
            ctx.strokeStyle = current_colour; //Sets the colour to be drawn as the colour stored in the current colour variable
            ctx.stroke();  //Draws the path given
        }
    }).mouseup(function(e) {  //When the mouse click is released, do this function...
        isDown = false; //Sets the mouseclick variable to false
        ctx.closePath();  //Closes the path
    });
}

    else if(mouse_state == "fill_shape"){
    //Checks is canvas exists and/or is supported by the browser

    $(myCanvas).mousedown(function(ev) { //When the user clicks on the canvas, this function runs
         console.log("1" + mouse_state);
        ev.preventDefault();  //Prevents the cursor from changing when clicking on the canvas
        isDown = true; //Sets the mouseclick variable to down
        ctx.beginPath(); //Begins the path
        canvasX = ev.pageX - myCanvas.offsetLeft; //Stores the mouse position on the x axis by subtracting the distance from the left edge of the canvas from the position from the left edge of the document.
        canvasY = ev.pageY - myCanvas.offsetTop; //Stores the mouse position on the y axis by subtracting the distance from the top edge of the canvas from the position from the top edge of the document.
        ctx.moveTo(canvasX, canvasY);  //Sets the position which the drawing will begin
    }).mousemove(function(ev) {
        if (isDown != false) { //On the mousemouse the line continues to be drawn as the mouseclick variable will still be set as false
            canvasX = ev.pageX - myCanvas.offsetLeft; //Similar to above
            canvasY = ev.pageY - myCanvas.offsetTop;
            ctx.lineTo(canvasX, canvasY); //Stores the information which should be drawn
            ctx.strokeStyle = current_colour; //Sets the colour to be drawn as the colour stored in the current colour variable
            ctx.stroke();  //Draws the path given
        }
    }).mouseup(function(ev) {  //When the mouse click is released, do this function...
        ctx.fillStyle = current_colour;
        ctx.fill();
        isDown = false; //Sets the mouseclick variable to false
        ctx.closePath();  //Closes the path
    });



}};

The drawing of the canvas works fine and the two different 'mouse_states' work fine with the first (paint) simply drawing the lines or shapes and the second (fill_shape) drawing shapes and then filling them in using ctx.fill.

The mouse_state variable is initialised as "paint" so the paint function runs and when I change it to "shape_fill" the shape fill function runs fine. The problem arises when changing between the two states using the buttons to change the variable name. The console log shows that the variable name changes as expected but it just doesn't seem to take any affect and sticks with the initial value of the mouse_state variable. I would appreciate any help or tips with this.

Answer 1

You're running the if statements at the wrong time - they're executing on page load, and subsequently only binding the first set of events.

Instead, bind only one set of events, and check the variable within them and run the corresponding code:

if (myCanvas) { //Checks is canvas exists and/or is supported by the browser
  var isDown = false; //Stores the current status of the mouseclick, default is not down
  var ctx = myCanvas.getContext("2d"); //Stores the 2d context of the canvas
  var canvasX, canvasY; //Initialises variables canvasX and canvasY


  $(myCanvas).mousedown(function(e) { //When the user clicks on the canvas, this function runs
    if (mouse_state == "paint") {
       //code for paint
    } else if (mouse_state == "fill_shape") {
       //code for fill_shape    
    }
  }); //etc, for other events
}