JSFiddle - React, Tailwind, and code Playground

by Kriem

HTML

<div id="world">world
    <div id="id1">1</div><div id="id2">2</div>
</div>

CSS

div{
    position:absolute;
    left:0; right:0; top:0; bottom:0;
}
#world{
    width:350px; height:250px;
}
#id1{
    right:50%; background:#fb0; opacity:.5;
}
#id2{
    left:50%; background:#bf0; opacity:.5;
}
canvas{
    position:absolute;
    z-index:3;
    background:rgba(255,255,255,0.5);
    opacity:.5;
}

JavaScript

$('#world').append(
    
    '<canvas id=canvas>this is a canvas</canvas>'
);

var canvas = $('#canvas');
canvas.width = $('#world').width();
canvas.height = $('#world').height();
$('#id1').html(canvas.width());
$('#id2').html(canvas.height());

draw(canvas);

function draw(canvas) {
    
    var ctx = canvas[0].getContext('2d'),
        purple = "#f09",
        lightPurple = "#fce";
    
    var width  = canvas.width(),
        height = canvas.height();
    
    // Translate for center
    ctx.translate(Math.round(width *.5), Math.round(height *.5));
        
    // Outline          
    ctx.fillStyle = purple;
    
    ctx.strokeRect(Math.floor(-.5*width), Math.floor(-.5*height), 
                 //Math.floor(.5*width), Math.floor(.5*height));, 
                 Math.floor(250), Math.floor(100));
    
    // Cross
    if(height>10) {
        
        ctx.strokeStyle  = lightPurple;
        ctx.lineWidth = 2;
        
        ctx.beginPath();  
        ctx.moveTo(Math.round(width *-.5), Math.round(height *-.5));
        ctx.lineTo(Math.round(width * .5), Math.round(height * .5));
        ctx.closePath();
        ctx.stroke();
        
        ctx.beginPath();  
        ctx.moveTo(Math.round(width * .5), Math.round(height *-.5));
        ctx.lineTo(Math.round(width *-.5), Math.round(height * .5));
        ctx.closePath();
        ctx.stroke();
    }
}