title: Black color for a style font clips through original line
body: <p>the purpose of <code>shadow()</code> is to create a line where a color that the user picks is followed by a black line. However, when the user drags the line across the canvas, particularly from right to left, the black line stutters over the original color </p>
  
  <p>I implemented the same method used to create a line on canvas to create the trailing black line in <code>shadow()</code>, only changing the properties <code>shadowOffset</code>, <code>lineJoin</code>, and <code>lineCap</code> in order to create the black line effect.</p>
  
  <pre class="lang-css prettyprint-override"><code>#c {
    border: 1px solid black;
  
  table{
      float:left;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Canvas&lt;/title&gt;
    &lt;link href="canvas.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
     &lt;h2&gt;STYLES:&lt;/h2&gt;
      &lt;form&gt;
      &lt;input type="button" value="shadow" onclick="shadow()"&gt;
      &lt;/form&gt;
  
      &lt;canvas id="c"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  
  &lt;script src="canvas.js"&gt;&lt;/script&gt;
  &lt;script src="colors.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>const c = document.querySelector("#c");
  c.height = window.innerHeight;
  c.width = window.innerWidth;
  const ctx = c.getContext("2d");
  //default settings
  ctx.strokeStyle = "black";
  ctx.lineWidth = 15;
  
  let confirmButton = document.querySelector(".confirm");
  
  window.addEventListener('load', () =&gt; {
  
  
    let painting = false;
  
    //when mouse is clicked; paint
    function mousedown(b) {
      painting = true;
      //allows for paint to appear without nedding to drag mouse
      mousemove(b);
    }
    //when mouse is not clicked; don't paint
    function mouseup() {
      painting = false;
      //resets path each time so multiple can be created
      ctx.beginPath();
    }
  
    function mousemove(b) {
      //Get correct mouse position
      var pos = getMousePos(c, b);
      //if not holding down the mouse; nothing happens
      if (!painting) return;
      //roundness of paint
      ctx.lineCap = 'round';
  
      //create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
      ctx.lineTo(pos.x, pos.y);
      //end the stroke and visualize paint
      ctx.stroke();
      //begins a new paint so that everything doesn't just stick to a fat line
      ctx.beginPath();
      //move the new line to wherever the mouse goes
      ctx.moveTo(pos.x, pos.y);
    }
  
    //starting posistion of paint line
    c.addEventListener('mousedown', mousedown);
    //ending posistion of paint line
    c.addEventListener('mouseup', mouseup);
    //whenever the mouse is moving; paint 
    c.addEventListener('mousemove', mousemove);
  
    confirmButton.addEventListener('click', size);
  });
  
  function size() {
     numS = document.getElementById("sizeInput").value;
    ctx.lineWidth = numS;
    console.log("blah "+ ctx.lineWidth)
  }
  
  
  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
  
  function shadow(){ 
  
    let sc =  ctx.shadowColor = 'rgb(0, 0, 0)';   
  
    let painting = false;
  
    //when mouse is clicked; paint
    function mousedown(b) {
      painting = true;
      sc = true;
      //allows for paint to appear without nedding to drag mouse
      mousemove(b);
    }
    //when mouse is not clicked; don't paint
    function mouseup() {
      painting = false;
      sc = false;
      //resets path each time so multiple can be created
      ctx.beginPath();
    }
  
    function mousemove(b) {
      //Get correct mouse position
      var pos = getMousePos(c, b);
      //if not holding down the mouse; nothing happens
      if (!painting) return;
      ctx.lineJoin = "round";
      ctx.lineCap = "round";
      ctx.shadowOffsetX = 10;
      ctx.shadowOffsetY = 10;
  
      //create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
      ctx.lineTo(pos.x, pos.y,);
      //end the stroke and visualize paint
      ctx.stroke();
      //begins a new paint so that everything doesn't just stick to a fat line
      ctx.beginPath();
      //move the new line to wherever the mouse goes
      ctx.moveTo(pos.x, pos.y,);
    }
  
    //starting posistion of paint line
    c.addEventListener('mousedown', mousedown);
    //ending posistion of paint line
    c.addEventListener('mouseup', mouseup);
    //whenever the mouse is moving; paint 
    c.addEventListener('mousemove', mousemove);
  }
  </code></pre>
  
  <p>What occurs is that the trailing black line clips through the original color line, creating a stutter effect. I showed code only relevant to this question, but for clarity I have re-created the project on plunker:
  <a href="https://plnkr.co/edit/0gP32ZSf0ZlOVguTj51X?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/0gP32ZSf0ZlOVguTj51X?p=preview</a></p>
  
  <p>file <code>color.js</code> is not relevant to this question</p>