JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<button type="button" onclick="canvasView1()">Canvas 1</button> 
<button type="button" onclick="canvasView2()">Canvas 2</button> 
<button type="button" onclick="canvasView3()">Canvas 3</button> 
<button type="button" onclick="canvasView4()">Canvas 4</button> 

<div class="wrapper">
    <canvas id="canvas1" width="400" height="300" style="z-index:0;">
   
    </canvas>
    <canvas id ="canvas2" width="400" height="300" style="z-index:0;">

</canvas>
	<canvas id ="canvas3" width="400" height="300" style="z-index:1;">

</canvas>
	<canvas id ="canvas4" width="400" height="300" style="z-index:0;">

</canvas>


</div>
</body>

CSS

.wrapper {
    position: relative;
    width: 400px;
    height: 300px;

}

.wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;

}

JavaScript

var c=document.getElementById("canvas1");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(30,30,150,50);

var d = document.getElementById("canvas2");
var dtx=d.getContext("2d");
dtx.fillStyle="#FF0000";
dtx.fillRect(30,30,150,50);

var e = document.getElementById("canvas3");
var etx=e.getContext("2d");
etx.fillStyle="#ff9900";
etx.fillRect(30,30,150,50);

var f = document.getElementById("canvas4");
var ftx=f.getContext("2d");
ftx.fillStle="#FF0000";
ftx.fillRect(30,30,150,50);

function canvasView1()
{


}

function canvasView2()
{

}

function canvasView3()
{

}

function canvasView4()
{

}