JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="signature" width="567" height="150"></canvas>

JavaScript

function onMouseUp(event) {
		'use strict';
		mousePressed = false;
	}
	function onMouseMove(event) {
		'use strict';
		if (mousePressed) {
			event.preventDefault();
			var mouseX = event.offsetX || event.layerX; 
			var mouseY = event.offsetY || event.layerY;
			ctx.lineTo(mouseX, mouseY);
			ctx.stroke();
		}
	}
	function onMouseDown(event) {
		'use strict';
		mousePressed = true;
		var mouseX = event.offsetX || event.layerX;
		var mouseY = event.offsetY || event.layerY;
		ctx.beginPath();
		ctx.moveTo(mouseX, mouseY);
	}
	window.onload = function(){
		'use strict';
		window.can = document.getElementById("signature");
		window.mousePressed = false;
		window.ctx = can.getContext("2d")
		can.addEventListener('mousemove', onMouseMove, false);
		can.addEventListener('mousedown', onMouseDown, false);
		can.addEventListener('mouseup', onMouseUp, false);
	};