JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c"></canvas>
<h1>The canvas is transparent</h1>

CSS

* {
  position: absolute
}

canvas {
  z-index: 99;
}

JavaScript

var w = 200;
var h = 200;
var diameter = 40;
var canvas = document.getElementById('c');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');

ctx.globalAlpha = 0.5;
ctx.fillStyle = "#f00";
ctx.arc(w/2, h/2, diameter, 0, Math.PI*2);
ctx.fill();
ctx.globalAlpha = 1;

var imageData = canvas.toDataURL(0, 0, w, h);
// ctx.putImageData(imageData, 10, 10);
var tmp = document.createElement('img');
tmp.style.display = 'none'
tmp.src = imageData;
document.body.appendChild(tmp);
ctx.drawImage(tmp, 30, 30);