Untitled

<!DOCTYPE html>
<html>
<head>
<title>COLORS</title>
<style>
    canvas {background: black }
</style>

<script>
var canvas;
var ctx;
const H = 1000;
const W = 1200;
var goPath = false;
var lastAct = 0;
var list = [];
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();
}, 1);

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

onmousemove = function (event) {
  var curD = new Date();
  if(Math.abs(curD.getMilliseconds()-lastAct)%200>30){
    lastAct = curD.getMilliseconds();
    var cx = event.pageX-8.5;
    var cy = event.pageY-10;
    printRoungInCenterWithR(cx,cy,10*Math.random(), getRandomColor());
  }
}
onmousedown = function(event){
  var cx = event.pageX-8.5;
  var cy = event.pageY-10;
  var curR = 12;
  printRoungInCenterWithR(cx,cy,curR, getRandomColor());
  var curTime = getTimeMs();
  for(var i =6;i>=1;i--)
    list.push([cx, cy, i, curR, getRandomColor(), curTime + 25*i]);
}

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;
};

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;
}

</script>
</head>
<body onload = "init()">
  <canvas id="myCanvas" width="1200" height="1000">
  </canvas>
</body>
</html>