JSFiddle - React, Tailwind, and code Playground

by Michaël van de Weerd

HTML

<canvas id="" class="stream" width="500" height="500">
  <button type="reset">Clear</button>
</canvas>

CSS

canvas {
  background-color: #000;
}

JavaScript

const R = 5;
const A = 1;
const D = 5;
const H = 2;

const N = 200;

var X, Y;
var T = false;

var S, U;

let str = document.getElementsByClassName("stream");

for(let i = 0; i < str.length; i++) {
	let s = str[i];
  let c = s.getContext("2d");
  
  let w = s.clientWidth;
	let h = s.clientHeight;
  
  s.addEventListener("mousedown", function(e) {  
  	T = true;
    X = e.clientX;
    Y = e.clientY;
    
   	S = new Date().getTime();
  });
  
  s.addEventListener("mouseup", function(e) {
  	T = false;
    
    u = new Date().getTime();
    
    if(U) {
    	n = u - U;
      
      if(n < N) {
      	c.clearRect(0, 0, w, h);
      }
    }
    
    U = u;
  });
  
  s.addEventListener("mousemove", function(e) {
  	X = e.clientX;
    Y = e.clientY;
  });
  
  for(let j = 0; j < A; j++) {
  	pix(c, w, h);
  }
  
  fad(c, w, h);
}

function fad(c, w, h) {
	c.fillStyle = "RGBA(0,0,0,0.02)";
  c.fillRect(0, 0, w, h);
  
  setTimeout(fad, D, c, w, h);
}

function pix(c, w, h, x, y, r, g, b) {
  x = hor(x, w);
  y = ver(y, h);

  if(T) {
  	dx = X - x;
    dy = Y - y;
    
    c.fillStyle = "red";
    c.fillRect(x, y, dx, dy);
    
    a = Math.atan(dy / dx);
    
    x += Math.sin(a) * H;
    y += Math.cos(a) * H;
  }

  r = red(r);
  g = gre(g);
  b = blu(b);

  c.fillStyle = "RGB(" + r + "," + g + "," + b + ")";
  c.fillRect(x, y, 1, 1);
  
  setTimeout(pix, D, c, w, h, x, y, r, g, b);
}

function ran(min, max) {
	return Math.random() * (max - min) + min;
}

function hor(x, w) {
	if(x) {
  	p = x + ran(-R, R);
    
    if(p > 0 && p < w) {
    	x = p;
    }
  } else {
  	x = w/2;//ran(0, w);
  }
  
  return x;
}

function ver(y, h) {
  if(y) {
  	p = y + ran(-R, R);
    
    if(p > 0 && p < h) {
    	y = p;
    }
  } else {
  	y = h/2;//ran(0, h);
  }
  
  return y;
}

function red(r) {
  if(r) {
  	r = r + ran(-1, 1);
  } else {
   	r = ran(0, 255);
  }
  
  return r;
}

function gre(g) {
  if(g) {
  	g = g + ran(-1, 1);
  } else {
   	g = ran(0, 255);
  }
  
  return...