title: How to avoid coloring over specific colors in HTML5 canvas
body: <p>I have a canvas that imports various black and white pictures, and would like to have it so that the stroke does not color over the black pixels. Right now, the brush effect is done with:</p>
  
  <pre><code>    var ctx = canvas.getContext('2d');
      ...
      ctx.beginPath();
      //xy being the mouse coordinates, retrieved earlier. 
      ctx.arc(xy[0], xy[1], ctx.lineWidth/2, 0, 2*Math.PI, true);
      ctx.closePath();
      ctx.fill();
  </code></pre>
  
  <p>Here is an example of the effect I would like to achieve. </p>
  
  <p><img src="https://i.stack.imgur.com/NZ0sR.png" alt="Depiction of desired effect"></p>