JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="50" height="50"></canvas>

CSS

canvas {
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
}

JavaScript

const canvas = document.getElementsByTagName('canvas')[0];
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'beige';
ctx.fillRect(0, 0, 50, 50);

ctx.fillStyle = '#000';
ctx.beginPath();
ctx.translate(0.5, 0);
ctx.moveTo(25, 0);
ctx.lineTo(50, 25);
ctx.lineTo(25, 50);
ctx.lineTo(0, 25);
ctx.closePath();
ctx.fill();