JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>
<button id="clear">Clear</button>

CSS

body {
  background: gray;
  margin: 0;
}
canvas {
  border: 1px solid black;
}

JavaScript

const canvas = document.getElementById('myCanvas');
const clear = document.getElementById('clear');
const ctx = canvas.getContext('2d');

let lastCanvas;

clear.addEventListener('click', () => {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
});

let down = false;
let lastPoints = [];
ctx.lineCap = 'round';

canvas.addEventListener('mousedown', ({offsetX: x, offsetY: y}) => {
	lastPoints.push({x, y});
  ctx.lineWidth = 5;
  ctx.shadowColor = 'transparent';
  lastCanvas = ctx.getImageData(0, 0, canvas.width, canvas.height);
  down = true;
  ctx.beginPath();
  ctx.moveTo(x, y);
});

canvas.addEventListener('mouseup', (event) => {
	ctx.putImageData(lastCanvas, 0, 0);
  redraw();
  lastPoints = [];
  down = false;
});

let count = 0;

canvas.addEventListener('mousemove', ({offsetX: x, offsetY: y}) => {
	count++;
	if (!down || count % 2 === 0 || count % 3 === 0) return;
  lastPoints.push({x, y});
	ctx.lineTo(x, y);
  ctx.stroke();
});

function redraw() {
	if (lastPoints.length === 0) return;
	const length = lastPoints.length;
  const {x, y} = lastPoints[0];
  ctx.beginPath();
  ctx.moveTo(x, y);
  let oldX = x, oldY = y;
  
  let max = 0;
  
  for (let i = 0; i < length-1; i++) {
  	const {x, y} = lastPoints[i];
    const {x: nX, y: nY} = lastPoints[i+1];
    if (oldX && (x !== oldX || y !== oldY)) {
      
    	const dis = Math.sqrt((x-oldX)*(x-oldX) + (y-oldY)*(y-oldY));
      const nDis = Math.sqrt((nX-x)*(nX-x) + (nY-y)*(nY-y));
      
      max = Math.abs(dis - nDis) > max ? Math.abs(dis - nDis) : max;
      
      ctx.shadowColor = 'rgba(0, 0, 0, 0.07)';
      //ctx.shadowBlur = dis;
      ctx.lineWidth =  1;
          
      const normX = (x - oldX)/dis;
      const normY = (y - oldY)/dis;
      
      const diffX = x - oldX;
      const diffY = y - oldY;
            
      console.log(`from dis`, dis, `to nDis`, nDis);
            
      for (let j = 0; j < dis; j+=2) {
      	const radius = dis * (1 - smootherstep(j/dis)) + nDis * smootherstep(j/dis);
  ...