JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas">
</canvas>

CSS

* { margin: 0; padding: 0;}

body, html { height:100%; }

#canvas {
    position:absolute;
    width:100%;
    height:100%;
}

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle = "#000";
var w=canvas.width;
var h=canvas.height;
ctx.fillRect(0,0,w,h);
ctx.fillStyle="#fff";
ctx.beginPath();
var a=w/2;
var b=0;
ctx.arc(a,b,20,0,Math.PI,false);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="red";
ctx.fillRect(0,0,10,100);
ctx.stroke();
ctx.save();

ctx.translate(240, 120);

ctx.rotate(Math.PI / 4); // 45 degrees

ctx.fillStyle = "yellow";
ctx.fillRect(-40, -40, 20, 20);

ctx.restore();