JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<div>
    <canvas></canvas>
</div>

CSS

div {
    width:150px;
    height:40px;
    position:relative;
    background:blue;
}
canvas { background:rgba(255,0,0,0.3) }

JavaScript

var canvas = document.querySelector('canvas'),
    ctx    = canvas.getContext('2d');
fitToContainer(canvas);

ctx.fillStyle='yellow';
for (var i=0;i<5;++i) ctx.fillRect(i*18+2,2,16,16);

function fitToContainer(canvas){
  canvas.style.width='100%';
  canvas.style.height='100%';
  canvas.width  = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}