MOVE THE MOUSE OVER THE CANVAS TO GENERATE PARTICLES

  <script>
  // DEFINE YOUR GLOBAL VARIABLES HERE
   var canvas;
    var context;
  
    //  var thing = new thing();
  
    var thinglist = new Array();
  
    var stage, mouseX, mouseY;
  
    // INITIALIZE THE STARTING FUNCTION
   function init() {
    
    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");
  
    canvas.addEventListener("mousemove", createThing, false);
  
    drawBkgd(); // COVER TRANSPARENT CANVAS
  
    return setInterval(create, 20); // THIS IS WHERE AL HAPPENS
  
    }
  
    function createThing(event) {
  
    stage = canvas.getBoundingClientRect();
   mouseX = event.clientX - stage.left; 
   mouseY = event.clientY - stage.top;
   var r = 10*Math.random() + 10;
    
    var R = Math.round( mouseX/canvas.width * 255 );
    var G = Math.round( mouseY/canvas.height * 255 );
    var B = Math.round( (mouseX + mouseY) / (canvas.width + canvas.height) * 255 );
    var A = Math.random();
  
    var RGBA = "rgba("+R+","+G+","+B+","+A+")";
  
    thinglist.push( new thing(mouseX,mouseY,r,RGBA));
  
    create();
  
    }
  function drawBkgd() { // USE THIS AREA TO MODIFY BKGD
   context.clearRect(0,0,canvas.width, canvas.height);
    
    }
    
    
    function create() { 
   document.getElementById('display').innerHTML = mouseX + " // " + mouseY + " // " + thinglist.length;
    
    drawBkgd();
  
    for ( var i = 0 ; i < thinglist.length - 1; i++) {
  
    context.beginPath();
  
    context.fillStyle = thinglist[i].RGBA;
  
    if (thinglist[i].y > canvas.height) { thinglist.splice(i,1); } // REMOVE THIS ITEM FROM LIST
  
    context.fillRect(thinglist[i].x, thinglist[i].y+=10, thinglist[i].r, thinglist[i].r);
  
    context.stroke();
  
    context.closePath();
  
    }
  }
    
    function thing(x,y,r,RGBA) {
   this.x = x,
    this.y = y,
    this.r = r;
    this.RGBA = RGBA
  
    return (this.x, this.y, this.r, this.RGBA); 
  
    }
  
  </script>