JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <div id="wrapper">
      <img id="img" src="https://i.imgur.com/0qjIa89.png" />
      <canvas id="canvas"></canvas>
    </div>
  </body>
</html>

CSS

#wrapper {
  margin: 0 auto;
  width: 256px;
}

#img {
  position: relative;
  top: 0;
  left: 0;
}

#canvas {
  position: relative;
  margin-top: 0;
  margin-left: 0;
  top: -256px;
  left: 0;
  z-index: 1;
}

JavaScript

var canvas = document.querySelector("canvas");
canvas.width = 1024;
canvas.height = 1024;
var c = canvas.getContext("2d");
c.fillRect(0, 0, 8, 8);