JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
		<html lang="en">
		<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.css" />
	
		<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		<script src="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.js"></script>
		</head>
		<body>
		<button id="undo">Undo</button>
		<button id="save">Save</button>
		<button id="clear">Clear Saved Picture</button>
    <span id="numOfSavedHistory">0</span>
		<div id="target" class="drawpad-dashed"></div>
		<div id="outputBase64"></div>

		</body>
		</html>

CSS

body {background-color:rgb(248, 255, 227)}
		#target {
		width:500px;
		height:400px;
		}

JavaScript

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};


$(document).ready(function() {
  
  
  $("#save").click(function() {
    console.log("save");
    var base64Image = $("#target canvas").get(0).toDataURL();
    console.log(base64Image);
    $("#outputBase64FormInput").val(base64Image);
    $("#outputBase64").html(base64Image);
    var savedImageJson = window.localStorage.getItem("savedImage");
    console.log(savedImageJson);
    if(savedImageJson == null || typeof savedImageJson == "undefined") savedImageJson = "[]";
    var savedImageArr = JSON.parse(savedImageJson);
    savedImageArr.push(base64Image);
    window.localStorage.setItem("savedImage", JSON.stringify(savedImageArr));
    $("#numOfSavedHistory").html( savedImageArr.length );
  });
  
  $("#clear").click(function() {
    console.log("save");
	  window.localStorage.removeItem("savedImage");
    $("#numOfSavedHistory").html( 0 );
  });
  
  $("#undo").click(function() {
    //contextCanvas.clear();
    canvas.width = canvas.width;
    console.log("undo");
    var savedImageJson = window.localStorage.getItem("savedImage");
    console.log(savedImageJson);
    if(savedImageJson == null || typeof savedImageJson == "undefined") savedImageJson = "[]";
    var savedImageArr = JSON.parse(savedImageJson);
    savedImageArr.pop();
    window.localStorage.setItem("savedImage", JSON.stringify(savedImageArr));
    
    // draw old picture on canvas
    var imageOld = new Image();
    imageOld.src = savedImageArr[savedImageArr.length-1];
    imageOld.onload = function() {
      contextCanvas.drawImage(imageOld, 0, 0);
    };
    
    $("#numOfSavedHistory").html( savedImageArr.length );
  });
  
  

  // set...