JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="200" height="200"></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;
  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;
});

canvas.addEventListener('mousemove', ({offsetX: x, offsetY: y}) => {
	if (!down) 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);
  for (let i = 0; i < length; i++) {
  	const {x, y} = lastPoints[i];
    ctx.lineWidth =  easyOut(1-(i / length )) * 5;
    console.log(`x`, i / length, `easyOut`, easyOut((i / length )));
  	ctx.lineTo(x, y);
    ctx.stroke();
  }
}

function easyOut(x) { 
   return -Math.cos(x*Math.PI*0.5+Math.PI*0.5);
}