JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

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

JavaScript

{
  let ctx = canvas.getContext('2d');
  let x = 200;
  let y = 150;
  let w = 200;
  let h = 122;
  let x_shift = x + w / 2;
  let y_shift = y + h / 2;
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
  ctx.fillRect(x, y, w, h);
  ctx.fillStyle = 'rgba(0, 0, 190, 0.5)';
  ctx.translate(x_shift, y_shift);
  ctx.rotate(Math.PI / 4);
  ctx.translate(-x_shift, -y_shift);
  ctx.fillRect(x, y, w, h);
}