JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<canvas id="paint" width="600px" height="300px"></canvas>
		

		<div id="controls">
			<button name="reset" id="reset">Reset</button>
			&nbsp;<button name="redraw" id="redraw">Re-Draw</button>
		</div>
	</body>

CSS

#paint{
	border: solid;
}

JavaScript

$(document).ready(function(){
	var x, y, context, painter, canvas;
    
	var xCounter = 0 , yCounter = 0;
	var xarray = [];
	var yarray = [];

	function init(){
		while(document.getElementById("paint") === undefined){
			//do nothing
		}

		console.log("Loaded document now registering events for canvas");
		canvas = document.getElementById("paint");

		context = canvas.getContext('2d'); 
		painter = new Painter();

		canvas.addEventListener('mousedown', capture, false);
		canvas.addEventListener('mouseup', capture, false);
		canvas.addEventListener('mousemove', capture, false);

		document.getElementById("reset").addEventListener("click",function(){ clearCanvas(canvas);}, false);

			document.getElementById("redraw").addEventListener("click",             function(){
				autoDraw();
			}, false);
    }

	function clearCanvas(canvas){
	context.save();

	// Use the identity matrix while clearing the canvas
	context.setTransform(1, 1, 0, 1, 0, 0);
	context.clearRect(0, 0, canvas.width, canvas.height);

	// Restore the transform
	context.restore();

	};

    function capture(event){
            
        if(event.which !== 1){
            return;
        }	
        tempPos = getMousePos(canvas, event);
        x = tempPos.x;
        y = tempPos.y;
    
        switch(event.type){
            case 'mousedown':
                painter.startPaint(event);
                break;
            case 'mouseup':
                painter.endPaint(event);
                break;
            case 'mousemove':
                painter.paint(event);
                break;
        }
    
    
    };


    var Painter = function(){
        var self = this;
        self.paintStarted = false;
        self.currentlyAutoDrawing = false;
    
        self.startPaint  = function(event){
                self.resetRecordingParams();
                self.paintStarted = true;
                context.beginPath();
                context.moveTo(x,y);
                self.record(); 
        }
    
    ...