JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <button onclick="bringToFront('1')">Canvas 1</button> 
    <button onclick="bringToFront('2')">Canvas 2</button> 
    <button onclick="bringToFront('3')">Canvas 3</button> 
    <button onclick="bringToFront('4')">Canvas 4</button> 
    
    <div class="wrapper">
        <canvas id="canvas1" width="400" height="300">
        </canvas>
        <canvas id ="canvas2" width="400" height="300">
        </canvas>
        <canvas id ="canvas3" width="400" height="300">
        </canvas>
        <canvas id ="canvas4" width="400" height="300">
        </canvas>
    </div>
</body>

CSS

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

}

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

}

.top {
   z-index: 2;
}

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 bringToFront(num) {
  document.getElementsByTagName('canvas')[0].style.zIndex=1;
  document.getElementsByTagName('canvas')[1].style.zIndex=1;
  document.getElementsByTagName('canvas')[2].style.zIndex=1;
  document.getElementsByTagName('canvas')[3].style.zIndex=1;
  document.getElementById('canvas' + num).style.zIndex=2;
}