JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<canvas id="canvas" width="1600" height="1200" style="width: 800px; height: 600px;"></canvas>

CSS

* {
	padding: 0;
	margin: 0;
}

JavaScript

const halfPie = Math.PI / 2;
const halfPieSin = Math.sin(halfPie);
const halfPieCos = Math.cos(halfPie);
const negHalfPieSin = Math.sin(-halfPie);
const negHalfPieCos = Math.cos(-halfPie);
var points = [];
var context = canvas.getContext("2d");
var lineWidth;
var frame;
var drawing;
context.fillStyle = "#000";

function rotate(x, y, point) {
	return [
		x + (point[0] - x) * halfPieCos - (point[1] - y) * halfPieSin,
		y + (point[0] - x) * halfPieSin - (point[1] - y) * halfPieCos
	];
}

function rotateCounter(x, y, point) {
	return [
		x + (point[0] - x) * negHalfPieCos - (point[1] - y) * negHalfPieSin,
		y + (point[0] - x) * negHalfPieSin - (point[1] - y) * negHalfPieCos
	];
}

function lineBegin ({ pageX, pageY }) {
	if (drawing) {
		return;
	}
	var x = event.pageX * 2;
	var y = event.pageY * 2;
	var t = +new Date();
	points.unshift([x, y, t]);
	lineWidth = 1;
	drawing = true;
	document.addEventListener("mousemove", lineDraw);
	document.addEventListener("touchmove", lineDraw);
	document.addEventListener("mouseup", lineEnd);
	document.addEventListener("touchend", lineEnd);
}

function lineDraw (event) {
	var x = event.pageX * 2;
	var y = event.pageY * 2;
	var t = +new Date();
	points.unshift([x, y, t]);
	if (!frame) {
		frame = requestAnimationFrame(draw); 
	}
}

function draw () {
	var [ x, y, t ] = points[0];
	var [ x2, y2, t2 ] = points[1];
	var distance = Math.sqrt(Math.pow(x2 - x, 2) + Math.pow(y2 - y, 2)); 
	var lineFactor = distance / (t - t2);
	var shade = 128 - Math.min(Math.max(Math.abs(lineFactor) * 10, 0), 128);
	var ba = [((x2 - x) / distance * lineWidth + x2), (y2 - y) / distance * lineWidth + y2];
	var baTan1 = rotate(x2, y2, ba);
	var baTan2 = rotateCounter(x2, y2, ba);
	lineWidth = Math.max(Math.abs(lineFactor) * 5, 1);
	var ab = [((x2 - x) / distance * lineWidth + x), (y2 - y) / distance * lineWidth + y];
	var abTan1 = rotate(x, y, ab);
	var abTan2 = rotateCounter(x, y, ab);
	context.save();
	context.beginPath();
	context.fillStyle =...