JSFiddle - React, Tailwind, and code Playground

HTML

<html>
 <head>
 <style>
 div { background: -webkit-canvas(squares); border:2px solid black }
 #div1 {width:600px; height:200px;}
 #div2 {width:300px; height:150px;}
 #div3 {width:300px; height:150px;background-size: 50%;}
 #div4 {width:300px; height:150px;background-size: 50% 200%;}
 #cnvs {width:300px; height:150px;} 
 </style>
 
 </head>
 <body>
   <div id="div1"></div>
   <div id="div2"></div>
   <div id="div3"></div>
   <div id="div4"></div>
   <canvas id="cnvs"></canvas>
 </body>
</html>

JavaScript

var ctx = document.getCSSCanvasContext("2d", "squares", 300, 300);

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 55, 50);

var cnvs = document.getElementById("cnvs");
var ctx2 = cnvs.getContext('2d');
var bitmap = ctx.getImageData(0, 0, 300, 300);
ctx2.putImageData(bitmap , 0, 0);