JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="cvs" width="400" height="400"></canvas>
<canvas id="cvs1" width="400" height="400"></canvas>
<hr />
<input type="submit" id="reDrowA" value="Draw A" />
<input type="submit" id="reDrowB" value="Draw B" />
<hr />
<input type="submit" id="clearA" value="Clear A" />
<input type="submit" id="clearB" value="Clear B" />

CSS

#cvs{
    
    
    position:absolute;
}

JavaScript

$(document).ready(function(){
    canvas1 =  document.getElementById("cvs"); 
     
    $("#reDrowA").on("click",function(){
        a = canvas1.getContext('2d');
        a.translate(0.5, 0.5);
        a.beginPath();
        a.setLineDash([2,10]);
        a.moveTo(10,10);
        a.lineTo(300,10);
        a.lineTo(300,300);
        a.stroke();
    });
    $("#reDrowB").on("click",function(){
         canvas2 =  document.getElementById("cvs1"); 
        b = canvas2.getContext('2d');
        b.translate(0.5, 0.5);
        b.beginPath();
        b.setLineDash([2,10]);
        b.moveTo(10,10);
        b.lineTo(10,300);
        b.lineTo(300,300);
        b.stroke();
    });
    $("#clearA").on("click",function(){
       a.clearRect(0, 0, canvas1.width, canvas1.height);
    });
    $("#clearB").on("click",function(){
        b.clearRect(0, 0, canvas2.width, canvas2.height);
    });
    
});