JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="cvs" 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" />

JavaScript

$(document).ready(function(){
    var lineStateA = 0;
    var lineStateB = 0;
    
    var drawA = function(){
        a = canvas.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();
        lineStateA = 1;
    };
    var drawB = function(){
        b = canvas.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();
        lineStateB = 1;
    };
    canvas =  document.getElementById("cvs");    
    $("#reDrowA").on("click",function(){
        drawA();
    });
    $("#reDrowB").on("click",function(){
        drawB();
    });
    $("#clearA").on("click",function(){
       a.clearRect(0, 0, canvas.width, canvas.height);
       lineStateA = 0;
       if (lineStateB) {
           drawB();
       };
    });
    $("#clearB").on("click",function(){
        b.clearRect(0, 0, canvas.width, canvas.height);
        lineStateB = 0;
        if (lineStateA) {
            drawA();
        };
    });
    
});