JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">


   <canvas id="tool_sketch" width="500" height="500" style="background: url(creditcardform.jpg) no-repeat  left top;"></canvas>
  </div>

<input type="button" id="firstclick" value="name" onclick="buttonClicked()"/>
<input type="button" id="secondclick" value="city" />
<input type="button" id="thirdclick" value="phone" />

JavaScript

window.onload = function() {
    var c = document.getElementById("tool_sketch");
    var ctx = c.getContext("2d"); 
    
    ctx.globalAlpha = 25 / 100;
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
};


function buttonClicked() {
    // Do what you need here 
    alert("Hello World");   
}