title: Push away and then restore dots position on “mouse move”
body: <p><a href="https://i.stack.imgur.com/jgatV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jgatV.jpg" alt="enter image description here"></a>
  I have a canvas that has some dots. when the mouse comes near the dots, the dots spread away and then when mouse is far from that dots, they come back to their last position.</p>
  
  <blockquote>
    <p>The idea of work is:</p>
  </blockquote>
  
  <p>when the mouse reaches the red environment(hover on the canvas) the previous dots should be removed by clearRect operation and place the new coordinates.</p>
  
  <pre><code>var offsetX = canvas.offsetLeft;
  var offsetY = canvas.offsetTop;
  mouseX = parseInt(e.clientX - offsetX);
  mouseY = parseInt(e.clientY - offsetY);
  
  for(var i=0, j=particles.length;i&lt;j;i++){
      ctx.clearRect(particles[i].x, particles[i].y, 2, 2);
  }
  for(var i=0, j=particles.length;i&lt;j;i++){
      var xDistance = particles[i].x - mouseX;
      var yDistance = particles[i].y - mouseY;
      var distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
     if (distance &lt; 20) {
          angle = Math.atan2(yDistance,xDistance);
          particles[i].x += Math.cos(angle) * distance;
          particles[i].y += Math.sin(angle) * distance;
     }
      ctx.fillRect(particles[i].x, particles[i].y, 2, 2);
  }
  </code></pre>
  
  <ol>
  <li>The first problem is I dont know why the clearRect doesn't clear the previous dots completely because I want to remove the previous dots and placing dots with new coordinates</li>
  <li>The second problem is creating a jumping situation cuz I want to be like animation</li>
  <li>The third problem is returning the dots to their main positions. The point is that this code has been wrote without any library.</li>
  </ol>
  
  <p>please help me to solve my problems.</p>
  
  <p>here is demo of my code: <a href="https://jsfiddle.net/vkoori123/nLnLgpzp/1/" rel="nofollow noreferrer">jsfiddle</a></p>