title: How to create Blur Eraser and Blur Drawing effect in JQuery or Javascript?
body: <p>I want to make <strong>blur erasing</strong> and <strong>blur drawing</strong> effect in JQuery or Javascript. I have written the code for erasing the blurred image when I hover it and to reveal the unblurred image. Here's the screenshot.
  <a href="https://i.stack.imgur.com/tBqC0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tBqC0.png" alt="enter image description here"></a></p>
  
  <p>I am able to erase the blur image when I hover over the image, but I couldn't redraw the blurred image at the same position, may be like after 500ms. How do I redraw the blur again over where I hovered with my mouse?</p>
  
  <p>Here's the code for reference:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Blur Testing&lt;/title&gt;
      &lt;meta name="content-type" content="text/html; charset=UTF-8"&gt;
      &lt;style&gt;
          body {
              margin: 0;
          }
          #item {
              background: url("http://i66.tinypic.com/2z6uq9f.jpg");
              background-size: cover;
              background-position: center;
          }
      &lt;/style&gt;
      &lt;script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;canvas id="item"&gt;&lt;/canvas&gt;
  &lt;script&gt;
      var canvas = document.getElementById('item');
      var ctx = canvas.getContext('2d'),
              img = new Image,
              radius = 30;
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
  
      $('#item').css({
          "-webkit-filter": "blur(0px)",
          "filter": "blur(0px)"
      });
      $(img).on('load', function () {
          $('#item').mouseover(function (e) {
              erase(getXY(e));
          }).mousemove(function (e) {
              erase(getXY(e));
              //setTimeout(redraw(getXY(e)), 400);
          });
  
          ctx.drawImage(img, 0, 0);
          ctx.globalCompositeOperation = 'destination-out';
      });
      img.src = 'http://i64.tinypic.com/14mt7yx.jpg';
      img.width = window.width;
      img.height = window.height;
  
      function getXY(e) {
          var r = $('#item')[0].getBoundingClientRect();
          return {x: e.clientX - r.left, y: e.clientY - r.top};
      }
  //    function redraw(pos) {
  //        ctx.globalCompositeOperation = 'source-in';
  //        ctx.beginPath();
  //        ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI);
  //        ctx.closePath();
  //        ctx.fill();
  //    };
      function erase(pos) {
          ctx.globalCompositeOperation = 'destination-out';
          ctx.beginPath();
          ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI);
          ctx.closePath();
          ctx.fill();
      }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>