JSFiddle - React, Tailwind, and code Playground

by m1erickson

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" />
</body>

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

canvas = document.getElementById("cvs");
context = canvas.getContext('2d');

// create an object containing the top-right lines
// the object contains its path points & if it is visible or not
var a = {
    path: [10, 10, 300, 10, 300, 300],
    isVisible: false,
}

// create an object containing the left-bottom lines
// the object contains its path points & if it is visible or not
var b = {
    path: [10, 10, 10, 300, 300, 300],
    isVisible: false,
}

// an array containing all the line-path objects
var myObjects = [a, b];

// clear the entire canvas 
// redraw any line-paths that are visible
function redrawAll(myObjects) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < myObjects.length; i++) {
        if (myObjects[i].isVisible) {
            drawLinePath(myObjects[i]);
        }
    }
}

// redraw 1 line-path
function drawLinePath(theObject) {
    var points = theObject.path;
    // save the current untranslated context state
    context.save();

    // draw lines through each point in the objects path
    context.translate(0.5, 0.5);
    context.beginPath();
    context.setLineDash([2, 10]);
    context.moveTo(points[0], points[1]);
    for (var i = 2; i < points.length; i += 2) {
        context.lineTo(points[i], points[i + 1]);
    }
    context.stroke();

    // restore the context to its untranslated state
    context.restore();
}

// use buttons to set & clear the visibility flags on objects
// In all cases, clear the entire canvas and redraw any visible objects

$("#reDrowA").on("click", function () {
    a.isVisible = true;
    redrawAll(myObjects);
});
$("#reDrowB").on("click", function () {
    b.isVisible = true;
    redrawAll(myObjects);
});
$("#clearA").on("click", function () {
    a.isVisible = false;
    redrawAll(myObjects);
});
$("#clearB").on("click", function () {
    b.isVisible = false;
    redrawAll(myObjects);
});