JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="800" height="500" id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

var rectWidth = 300;
var rectHeight = 200;

ctx.translate(canvas.width/2, canvas.height/2);

ctx.fillStyle = "#5A9BDC";
ctx.fillRect(0, 0, rectWidth, rectHeight);
//ctx.rect(0, 0, rectWidth, rectHeight);
//ctx.fill();


ctx.translate(-canvas.width/2, -canvas.height/2);

ctx.fillStyle = "#31B131";
ctx.rect(0, 0, rectWidth, rectHeight);
ctx.fill();