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 = [];
  var need =  true;
  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() {upd();}, 1000/60);


  function upd(){
    for(var i =0;i<60;i++){
      printRound();
    }
  }
  function printRound(){
    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]);
    list.sort((a,b)=>-a[4]+b[4]);
  }
  onmousedown = function(event){
    var cx = event.pageX-8.5;
    var cy = event.pageY-10;
    var curR = 15;
    var curTime = getTimeMs();
    var clrArr = new Array(4);
    for(var i=0;i<4;i++)
      clrArr[i] = getRandomColor();

    for(var i=0;i<150;i++)
    {
      var len = 3*i;
        list.push([cx+len*Math.cos(i*10),cy+len*Math.sin(i*10),curR-i/10, clrArr[i%4], curTime + 5*i]);
      list.push([cx+len*Math.cos(i*10),cy+len*Math.sin(i*10),(curR+1)-i/10, '#000000', curTime +5*i+1000]);
    }
    list.sort((a,b)=>b[4]-a[4]);
  }

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

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