Toggle brush colours html5 canvas

Question

I'm trying to create a drawing board with two different colour brushes. You can select the brush you want by clicking on the appropriate button.

Note: This only needs to work on iOS Safari.

The two brushes are:

1. A Yellow Highlighter
2. A solid brush colour

The issue I am facing is that selecting a different brush, alters the colour of the existing brush strokes on the canvas.

How can I have each brush not affect the other?

Code:

var el = document.getElementById('c');
var ctx = el.getContext('2d');
var isDrawing;
var _highlight = false;


function marker(){
  ctx.lineWidth = 10;
 ctx.strokeStyle = 'rgba(0,0,0,1)';
}

function highlight(){
  ctx.lineWidth = 15;
  ctx.strokeStyle = 'rgba(255,255,0,0.4)';
  ctx.globalCompositeOperation = 'destination-atop';
}

document.getElementById("marker").addEventListener("click", function(){
  _highlight = false;
});

document.getElementById("clear").addEventListener("click", function(){
  ctx.clearRect(0, 0, el.width, el.height);
  ctx.restore();
  ctx.beginPath();
});


document.getElementById("highlight").addEventListener("click", function(){
  _highlight = true;
});

el.onmousedown = function(e) {
  isDrawing = true;
  if(_highlight){
  highlight();
   ctx.lineJoin = ctx.lineCap = 'round';
   ctx.moveTo(e.clientX, e.clientY);  
  }else{
    marker();
    ctx.lineJoin = ctx.lineCap = 'round';
   ctx.moveTo(e.clientX, e.clientY);
  }
};
el.onmousemove = function(e) {
  if (isDrawing) {
    if(_highlight){
      highlight();
     ctx.lineTo(e.clientX, e.clientY);
     ctx.stroke();  
    }else{
      marker();
      ctx.lineTo(e.clientX, e.clientY);
     ctx.stroke();
    }
    
  }
};
el.onmouseup = function() {
  isDrawing = false;
};

canvas#c { 
  border: 1px solid #ccc;
  background:url(http://i.imgur.com/yf6d9SX.jpg);
  position: relative;
  left: 0;
  top: 0;
  z-index: 2;
}

<canvas id="c" width="930" height="500"></canvas>

<br>
<button id="marker">Marker</button>
<button id="highlight">Highlight</button>
<button id="clear">Clear</button>

Answer 1

You are accumulating all lines to the same path, so every time you stroke the current stroke color will be used for all of them, including the previous lines.

Try adding beginPath() at your mouse down event as well as in your pen change.

There are several other issues though in this code not addressed here, including:

• Composite mode when pen changes
• Mouse positions must be corrected to relative position of canvas

(For marker effect you can also use the new blending mode "multiply" instead of "destination-atop", does not work in IE though).

var el = document.getElementById('c');
var ctx = el.getContext('2d');
var isDrawing;
var _highlight = false;

function marker() {
  ctx.lineWidth = 10;
  ctx.strokeStyle = 'rgba(0,0,0,1)';
  ctx.globalCompositeOperation = 'source-over';
}

function highlight() {
  ctx.lineWidth = 15;
  ctx.strokeStyle = 'rgba(255,255,0,0.4)';
  ctx.globalCompositeOperation = "multiply";
  if (ctx.globalCompositeOperation !== "multiply")     // use multiply if available
    ctx.globalCompositeOperation = 'destination-over'; // fallback mode
}

document.getElementById("marker").addEventListener("click", function() {
  _highlight = false;
});

document.getElementById("clear").addEventListener("click", function() {
  ctx.clearRect(0, 0, el.width, el.height);
  ctx.beginPath();
});


document.getElementById("highlight").addEventListener("click", function() {
  _highlight = true;
});

el.onmousedown = function(e) {
  var pos = getMouse(e);
  isDrawing = true;
  ctx.beginPath();
  _highlight ? highlight() : marker();
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(pos.x, pos.y);
};

el.onmousemove = function(e) {
  if (isDrawing) {
    var pos = getMouse(e);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
  }
};
el.onmouseup = function() {
  isDrawing = false;
};

function getMouse(e) {
  var rect = el.getBoundingClientRect();
  return {x: e.clientX - rect.left, y: e.clientY - rect.top}
}

canvas#c {
  border: 1px solid #ccc;
  background: url(http://i.imgur.com/yf6d9SX.jpg);
  position: relative;
  left: 0;
  top: 0;
  z-index: 2;
}

<canvas id="c" width="930" height="500"></canvas>
<br>
<button id="marker">Marker</button>
<button id="highlight">Highlight</button>
<button id="clear">Clear</button>