title: How to spread out blur filter radius in HTML5 Canvas?
body: <p>I'm trying to create a watercolor fill effect with HTML5 canvas's blur filter, but I'm having an issue. When I hold my mouse in one position for more than a second or so, I'm left with a weird circular/bullseye residue (imgs attached). I can shake my mouse over a circle for a while and blur it out, but it's frustrating to do that and doesn't look great. How do I spread out the blur radius to avoid getting this weird residue effect?</p>
  <p><a href="https://i.stack.imgur.com/6ZpIw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6ZpIw.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/9SQiN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9SQiN.jpg" alt="enter image description here" /></a></p>
  <p>My code:</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('myCanvas');
  let c = canvas.getContext("2d");
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
  
  var mouseX, mouseY, pMouseX, pMouseY;
  let baseR, baseG, baseB;
  let color;
  setup();
  
  
  
  function setup() {
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width;
      canvas.height = height;
  
      baseR = Math.floor(Math.random() * 255);
      baseG = Math.floor(Math.random() * 255);
      baseB = Math.floor(Math.random() * 255);
  
      color = `rgba(${baseR}, ${baseG}, ${baseB})`;
  
      background("rgba(255, 255, 255, 0.00025)");
      draw();
  };
  
  function draw() {
  
      c.lineCap = "round";
      c.lineJoin = "round";
      background("rgba(255, 255, 255, .00001");
      c.strokeStyle = color;
  
      c.beginPath();
      c.lineWidth = 30;
      c.globalCompositeOperation = 'source-over';
      c.filter = `blur(30px) opacity(5%)`;
      c.stroke();
      c.lineWidth = 28;
      c.globalCompositeOperation = 'darken';
      c.filter = `blur(30px) opacity(10%)`;
      c.moveTo(pMouseX, pMouseY);
      c.lineTo(mouseX, mouseY);
      c.stroke();
      c.closePath();
  
      setTimeout(draw, 10);
  };
  
  function background(color) {
      c.beginPath();
      c.rect(0, 0, width, height);
      c.fillStyle = color;
      c.fill();
      c.closePath();
  }
  
  document.onmousemove = function (e) {
      pMouseX = mouseX;
      pMouseY = mouseY;
      mouseX = e.clientX;
      mouseY = e.clientY;
  };
  
  window.onresize = function (event) {
      setup();
  };
  
  document.onkeydown = function () {
      console.log('hi');
      color = `rgba(${Math.floor(Math.random() * baseR)},
      ${Math.floor(Math.random() * baseG)},
      ${Math.floor(Math.random() * baseB)})`;
      console.log(color);
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>