JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<title>Habragame</title>
<style>
#canvas {
  border: 1px solid black;
}
</style>
<script>
var canvas;
var context;
var waves = [];

function randomColor() {
  var r = Math.floor(Math.random() * 256),
      g = Math.floor(Math.random() * 256),
	    b = Math.floor(Math.random() * 256);
  return 'rgb(' + r + ',' + g + ',' + b + ')';
}

function step() {
  for (var waveIndex in waves) {
    var wave = waves[waveIndex];
    context.fillStyle = wave.color;
    for (var offset = 0; offset < wave.x + 1; ++offset) {
        context.fillRect(0, wave.y - offset, wave.x-offset, 1);
        context.fillRect(0, wave.y + offset, wave.x-offset, 1);
    }
    ++wave.x;
    if (wave.x >= canvas.width + canvas.height) {
      delete waves[waveIndex];
    }
  }
}

window.onload = function() {
  canvas = document.getElementById('canvas');
  context = canvas.getContext('2d');
  canvas.addEventListener('click', function(e) {
    waves.push({x: 0, y: e.y, color: randomColor()});
  }); 
  setInterval(step, 1);
}

</script>
</head>
<body>
<canvas id='canvas'>Canvas not supported</canvas>
</body>
</html>