JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="node">
            <div id="content">
                <div id="a" style="display: block;">
                    <canvas id="canvas1a"></canvas>
                </div>
                <div id="b" style="display: none;">
                    <canvas id="scmLayer1b"></canvas>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

#node {
    width: 600px;
    height: 400px;
    border: 1px solid black;
}

#canvas1a, #canvas1b {
    width: 600px;
    height: 400px;
    z-index: 1;
    position: absolute;    
}

#a, #b {
    width: 600px;
    height: 400px;
    position: absolute;    
}

JavaScript

var hiddenCanvas = "b";
var displayedCanvas = "a";

var update = function() {
    
  // flip
  document.getElementById(hiddenCanvas).style.display = 'block';
  document.getElementById(displayedCanvas).style.display = 'none';
    
  // change
  hiddenCanvas = ((hiddenCanvas == "a") ? ("b") : ("a"));
  displayedCanvas = ((hiddenCanvas == "a") ? ("b") : ("a"));
}

window.setInterval(update, 10);

document.getElementById("content").addEventListener("click", function(e){
   console.log("click------------"); 
});

document.getElementById("content").addEventListener("mousedown", function(e){
   console.log(e.srcElement.id); 
});

document.getElementById("content").addEventListener("mouseup", function(e){
   console.log(e.srcElement.id); 
});