JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<body onload="draw()">
  <canvas id="diagram"></canvas>
</body>

CSS

canvas {
  border: 2px solid rgba(23, 47, 200, 0.5);
}

JavaScript

function draw() {
  chart = document.getElementById("diagram");
  chart.height = 200;
  chart.width = 200;

  var ctx = chart.getContext("2d");
  ctx.fillStyle = "rgb(200, 0, 0)";
  ctx.fillRect(10, 10, 50, 50);
}

setTimeout(() => {
	let canvas = document.getElementById("diagram");
	canvas.width = 500;
}, 1000)