JSFiddle - React, Tailwind, and code Playground

HTML

<div class="canvas-container">
    <canvas id="game-canvas" width="800px" height="600px"></canvas>
</div>

CSS

body {
  background-color: #999999;
}

.canvas-container {
  text-align: center;
}

#game-canvas {
  background-color: #FFFFFF;
}

JavaScript

var canvas = document.getElementById('game-canvas');
var context = canvas.getContext('2d');

canvas.width = 400;
canvas.height = 500;

context.strokeStyle = "#000000";
context.fillStyle = "#000000";

context.strokeRect(100, 100, 100, 100);
context.fillRect(300, 100, 100, 100);

context.translate(0.5, 0.5);

context.strokeRect(100, 300, 100, 100);
context.fillRect(300, 300, 100, 100);