JSFiddle - React, Tailwind, and code Playground

by paxfeline

HTML

<div id="containter1">
doesn't work:
<canvas width="100" height="100"></canvas>
<div class="d2">
</div>
</div>

<div id="containter2">
works:
<canvas width="100" height="100"></canvas>
<div class="d2">
</div>
</div>

CSS

#containter1
{
  position: relative;
  display: inline-block;
  filter:
    drop-shadow(10px 10px 0 purple)
    drop-shadow(-10px -10px 0 purple);
   height: 200px;
   width: 200px;
}

#containter2
{
  position: relative;
  display: inline-block;
  filter: drop-shadow(10px 10px 0 purple);
  height: 200px;
  width: 200px;
}

canvas
{
  position: absolute;
  left: 0;
  width: 100px;
  z-index: 2;
}

.d2
{
  position: absolute;
  top: 100px;
  left: 50px;
  width: 50px;
  height: 50px;
  background-color: pink;
}

JavaScript

var cs = document.querySelectorAll("canvas");

for (var canvas of cs)
{
  var ctx = canvas.getContext("2d");

  ctx.strokeStyle = "black";
  ctx.fillStyle = "red";

  ctx.fillRect( 20, 20, 50, 50 );
}