title: HTML canvas move all elements to event click coords
body: <p>I have a bits raining effect made with canvas using this code <a href="https://codepen.io/P3R0/pen/MwgoKv" rel="nofollow noreferrer">script</a></p>
  
  <pre><code>    var c = document.getElementById("c");
      var ctx = c.getContext("2d");
  
      //making the canvas full screen
      c.height = window.innerHeight;
      c.width = window.innerWidth;
  
      //chinese characters - taken from the unicode charset
      var chinese = "0 1 ";
      //converting the string into an array of single characters
       chinese = chinese.split("");
  
      var font_size = 10;
      var columns = c.width/font_size; //number of columns for the rain
       //an array of drops - one per column
       var drops = [];
      //x below is the x coordinate
      //1 = y co-ordinate of the drop(same for every drop initially)
       for(var x = 0; x &lt; columns; x++)
      drops[x] = 1; 
  
      //drawing the characters
      function draw()
    {
  //Black BG for the canvas
  //translucent BG to show trail
  ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
  ctx.fillRect(0, 0, c.width, c.height);
  
  ctx.fillStyle = "#0F0"; //green text
  ctx.font = font_size + "px arial";
  //looping over drops
  for(var i = 0; i &lt; drops.length; i++)
  {
      //a random chinese character to print
      var text = chinese[Math.floor(Math.random()*chinese.length)];
      //x = i*font_size, y = value of drops[i]*font_size
      ctx.fillText(text, i*font_size, drops[i]*font_size);
  
      //sending the drop back to the top randomly after it has crossed the screen
      //adding a randomness to the reset to make the drops scattered on the Y axis
      if(drops[i]*font_size &gt; c.height &amp;&amp; Math.random() &gt; 0.975)
          drops[i] = 0;
  
      //incrementing Y coordinate
      drops[i]++;
  }
  }
  
   setInterval(draw, 33);
  </code></pre>
  
  <p>and I am trying to make an effect when i click on A button, I want for all the bits to move to the button position and i tried the following code but it is not working properly. I tried to stop the bits raining and move all elements from the current position to the click event coords. Any ideas?
  <a href="http://jsfiddle.net/qLnnfwbL/1/" rel="nofollow noreferrer">jsFiddle</a></p>