Виртуальные точки

"use strict";

let a = document.getElementById("c"),
  b = a.getContext("2d"),
  c,
  d,
  e = [400, 200],
  g = [400, 100],
  h = [200, 150],
  k = 0,
  l = true;

onWindowResize();

function draw() {
  b.fillStyle = "rgba(0,255,255,0.2)";
  b.fillRect(0, 0, c, d);
  b.fillStyle = "black";
  for (let x = 0; x < c; x += 30)
    for (let y = k; y < d; y += 30) {
      b.beginPath();
      let radMod = 14;
      for (let i = 0; i < e.length; i++) {
        const f = Math.pow(x + 15 - e[i], 2) + Math.pow(y + 15 - g[i], 2),
          p = h[i] * h[i];
        if (f < p) {
          const rm = f / p * 14;
          if (rm < radMod) radMod = rm;
        }
      }
      b.arc(x + 15, y + 15, l ? 15 - radMod : 1 + radMod, 0, 2 * Math.PI, 0);
      b.closePath();
      b.fill();
    }
  k = (k + 1) % 30 - 30;
}

const m = [5, 5],
  n = [5, 5],
  o = [5, 5];

function move() {
  for (let j = 0; j < e.length; j++) {
    e[j] += n[j];
    g[j] += o[j];
    if (e[j] - h[j] < 0) n[j] = m[j];
    if (e[j] + h[j] > c) n[j] = -m[j];
    if (g[j] - h[j] < 0) o[j] = m[j];
    if (g[j] + h[j] > d) o[j] = -m[j];
  }
}

let mousedown = false ;
document.body.onmousedown = function() {
  mousedown = true ;
  l = !l;
};

document.body.onmouseleave = function(){
  l = !l;
}

document.body.onclick = function(f) {
  e.push(f.layerX);
  g.push(f.layerY);
  h.push(100);
  n.push(5);
  o.push(5);
  m.push(5);
  l = !l;
};

window.addEventListener("resize", onWindowResize, false);

function onWindowResize(event) {
  c = a.width = window.innerWidth;
  d = a.height = window.innerHeight;
}

let request; // in case we want to cancel
animate();
function animate() {
  request = requestAnimationFrame(animate);
  move() ;
  draw();
}