Unable to switch context properties in an HTML5 Canvas by a click of a button?

[pureGold]

I am creating a Chrome extension that enables users to draw on top of webpages with a pen utensil, highlighter utensil, and eraser utensil. However, the issue I am coming upon is that I am unable to switch from one utensil to the next. The drawing feature ceases to exist. I would have to refresh the page and start over to choose another utensil which kills the purpose of the extension. I can't tell what the problem is because if I click a button, then a message is passed from the extension to a script that is injected, signaling it to change the properties of the context. utensils.js is supposed to switch the color, thickness of the stroke, etc. when a different button is being clicked but I cannot draw anymore if I click two different buttons. 

 

Here's the code.

 

testPopup2.js:

var eventDelegator = document.getElementById("eventDelegate");
eventDelegator.addEventListener("click", function(e){
  var target = e.target;
  chrome.tabs.executeScript(null, {file: "createCanvas.js"});
  if(target.id == "penButton" || target.id == "penPic" || target.id == "penName"){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
      chrome.tabs.sendMessage(tabs[0].id, {button: 'pen'});
    }
    );
  }
  if(target.id == "highlightButton" || target.id == "highlighterName" || target.id == "highlighterPic"){
    //alert("highlighter");
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
      chrome.tabs.sendMessage(tabs[0].id, {button: 'highlighter'});
    }
  );
  }
  /*else if(target.id == "eraserButton"){
    //chrome.tabs.executeScript(null, {file: "Utensils/Eraser.js"});
  }*/
  chrome.tabs.executeScript(null, {file: "Test Files/utensils.js"});
});

createCanvas.js:

if(document.getElementById("webpageCanvas") == null){
  var canvas = document.createElement('canvas');
  canvas.id = 'webpageCanvas';
  canvas.width = document.body.clientWidth;//Sets it to the width of webpages
  canvas.height = document.body.clientHeight;//Sets it to the height of most webpages
  canvas.style.display = 'block';
  canvas.style.position = 'absolute';
  canvas.style.zIndex = "10000";

  canvas.style.border = "2px solid purple";

  //console.log(canvas.width);
  //console.log(canvas.height);

  document.body.insertBefore(canvas, document.body.firstChild); //Adds canvas before the rest of the elements in the body
}

utensils.js:

 

var canvas = document.getElementById("webpageCanvas");
var context = canvas.getContext('2d');

var position = {x: 0, y: 0};
var last = {lastX: 0, lastY: 0};

function main(utensilClicked){
  if(utensilClicked == 'pen'){
    context.lineWidth = 3;
    context.lineJoin = 'round';
    context.lineCap = 'round';
    context.strokeStyle = 'black';
  }
  if(utensilClicked == 'highlighter'){
    context.lineWidth = 20;
    context.lineJoin = 'miter';
    context.lineCap = 'square';
    context.strokeStyle = "rgba(13, 213, 252, .4)";
  }

  function draw(){
    context.beginPath();
    context.moveTo(last.lastX, last.lastY);
    context.lineTo(position.x, position.y);
    context.closePath();
    context.stroke();
  }

  canvas.addEventListener('mousemove', function(e){
    last.lastX = position.x;
    last.lastY = position.y;

    position.x = e.pageX - this.offsetLeft;
    position.y = e.pageY - this.offsetTop;
  }, false);

  canvas.addEventListener('mousedown', function(e){
    //context.beginPath();
    //context.moveTo(position.x, position.y);
    canvas.addEventListener("mousemove", draw, false);
  });

  canvas.addEventListener('mouseup', function(){
    //When the mouse button isn't being held, then it removes the event listener
    canvas.removeEventListener('mousemove', draw, false);
  }, false);
}

chrome.runtime.onMessage.addListener(function(request, sender){
  main(request.button);
});