Project.v2

var canvas;
var ctx;
const H = 1000;
const W = 1200;
var goPath = false;
var lastAct = 0;
var list = [];
var need =  false;
function init() {
  canvas = document.getElementById('myCanvas');
  ctx = canvas.getContext('2d');
}
function printRoungInCenterWithR(x,y,r, clr){
  ctx = canvas.getContext('2d');
  ctx.fillStyle = clr;
  ctx.beginPath();
  var leftAngle = 0;
  var rightAngle = Math.PI*2;
  ctx.arc(x,y,r,leftAngle,rightAngle,false);
  ctx.fill();
}

var timerId = setInterval(function() {printRound();}, 5);

function printRound(){
  list.sort((a,b)=>-a[4]+b[4]);
  var curTime = getTimeMs();
  if(list.length>0){
    var v = list.pop();
    if(v[4]<curTime){
      printRoungInCenterWithR(v[0],v[1],v[2],v[3]);
    }
    else{
      list.push(v);
    }
  }
}

onmousemove = function (event) {
  if(getTimeMs()-lastAct<10||!need) return;
  lastAct =getTimeMs();
  var cx = event.pageX-8.5;
  var cy = event.pageY-10;
  var size = 20*Math.random();
  list.push([cx,cy,size, getRandomColor(), lastAct]);
  list.push([cx,cy,size+1, "#000000", lastAct+500]);
}
onmousedown = function(event){
  var cx = event.pageX-8.5;
  var cy = event.pageY-10;
  var curR = 5;
  var curTime = getTimeMs();
  var clr = getRandomColor();
  for(var i=0;i<50;i++)
  {
    var len = i*10;
    list.push([cx+len/3*Math.cos(Math.PI*i),cy+40*Math.sin(Math.PI*i/30),curR, clr, curTime + 30*i]);
    list.push([cx+len/3*Math.cos(Math.PI*i),cy+40*Math.sin(Math.PI*i/30),(curR+1), '#000000', curTime +30*i+5000]);
  }
}

function getTimeMs() {
  var date = new Date();
  return date.getMilliseconds()+date.getSeconds()*1000+date.getMinutes()*1000*60+date.getHours()*60*60*1000;
}

onkeydown = function(e) {
  var key = e.keyCode;
  if(key==32)need = !need;
};

function drawImg(img, x,y){
  img.onload =
  function(){
    ctx.drawImage(img, x, y);
  }
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++)
  color += letters[Math.floor(Math.random() * 16)];
  return color;
}