title: Drawing with canvas continuous line
body: <p>I wrote this code to draw free lines like paint,</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const canvas = document.getElementById("canv");
  let mousedown = false;
  const ctx = canvas.getContext("2d");
  ctx.lineWidth = 5;
  let x;
  let y;
  window.addEventListener("mousedown", (event) =&gt; {
  
    console.log('clicked');
    if (event.which == 3) {
      mousedown = false;
  
    } else if (event.which == 1) {
      mousedown = true;
    }
  
    window.addEventListener('contextmenu', (event) =&gt; {
      event.preventDefault();
    })
  
    window.addEventListener("mousemove", (event) =&gt; {
      if (mousedown) {
        document.body.style.cursor = "crosshair";
        console.log("MOVING");
        ctx.beginPath();
        x = event.clientX - 100;
        y = event.clientY - 100;
        ctx.moveTo(x, y);
        ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
        ctx.strokeStyle = 'black';
        ctx.stroke();
        ctx.closePath();
      } else if (!mousedown) {
        document.body.style.cursor = "crosshair";
        console.log("MOVING");
        ctx.beginPath();
        x = event.clientX - 100;
        y = event.clientY - 100;
        ctx.moveTo(x, y);
        ctx.arc(x, y, 0.5, 0, 2 * Math.PI, true);
        ctx.strokeStyle = 'white';
        ctx.stroke();
        ctx.closePath();
      }
  
    })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>canvas {
    position: absolute;
    top: 100px;
    left: 100px;
    border: 1px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canv" width="700" height="700" "&gt;
          Your Browser Doesn't Support Canvas.
      &lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The code is working, but I can only draw with certain speed, otherwise the line becomes distributed circles, is there any property or function to fix this issue?</p>