Canvas Compositing
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="350" height="230" style="border:1px solid #ccc;"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.globalAlpha = 1; ctx.fillStyle = '#1e293b'; ctx.fillRect(0, 0, canvas.width, canvas.height); // opaque background ctx.globalAlpha = 0.5; ctx.fillStyle = '#38bdf8'; ctx.fillRect(40, 40, 200, 120); // 50% see-through panel ctx.globalAlpha = 0.5; ctx.fillStyle = '#f472b6'; ctx.fillRect(140, 100, 200, 120); // overlaps the first panel ctx.globalAlpha = 1; // always reset when you're done </script> </body> </html>