title: HTML5 canvas javascript tapering brush
body: <p>I need create nice and smooth tapering brush like this:<img src="https://i.stack.imgur.com/njZB7.png" alt="enter image description here"></p>
  
  <p>But i have problem with mouse speed movement. how to make brush tapering no dependency with mouse movement speed. I need make brush tapering which not different then mouse move very fast and slow.</p>
  
  <p>Now with diferrent speed i get this results: 
  <img src="https://i.stack.imgur.com/RiM55.png" alt="enter image description here"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var el = document.getElementById('c');
      var ctx = el.getContext('2d');
      var isDrawing, lastPoint;
      ctx.lineWidth = 20; 
  
      el.onmousedown = function(e) {
          isDrawing = true;
          lastPoint = { x: e.clientX, y: e.clientY };
          ctx.lineWidth = 20;
      };
  
      el.onmousemove = function(e) {
      if (!isDrawing) return;
  
          ctx.lineJoin = "round";
          ctx.lineCap = "butt";
          ctx.strokeStyle = "#000000"; 
          ctx.globalAlpha = "1"; 
          
          ctx.globalCompositeOperation = "source-over"; 
          if(ctx.lineWidth &gt;= 5) {   
              ctx.lineWidth -= 0.1;
          }
  
          var currentPoint = { x: e.clientX, y: e.clientY };
  
          ctx.beginPath();
          ctx.moveTo(lastPoint.x, lastPoint.y);
          ctx.lineTo(currentPoint.x, currentPoint.y);
          ctx.closePath();
          ctx.stroke();
  
          lastPoint = currentPoint;
      };
  
      el.onmouseup = function() {
          isDrawing = false;
      };
  
      function clearit() {
          ctx.clearRect(0,0, 1000, 1000);
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    canvas { border: 1px solid #ccc }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="c" width="500" height="500"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>