[Sugerencia] Mi diseño de Creeper

El detalle de este problema es que te ayuda a ubicarte en un punto con respecto a la posición de las demás figuras. Así quedó mi Creeper HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Canvas</title>
  </head>
  <body>
    <canvas class="plantilla" width="350" height="300"></canvas>
  </body>
  <script src="index.js"></script>
</html>

CSS

* {
  padding: 0%;
  margin: 0%;
}
body {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.plantilla {
  border: 1px solid #000;
}

let pantalla = document.querySelector(".plantilla");
let pincel = pantalla.getContext("2d");

pincel.fillStyle = "darkgreen";
pincel.fillRect(0, 0, 350, 300);

pincel.fillStyle = "black";
pincel.fillRect(50, 70, 90, 90);
pincel.fillRect(210, 70, 90, 90);
pincel.fillRect(140, 160, 70, 100);
pincel.fillRect(100, 190, 40, 110);
pincel.fillRect(210, 190, 40, 110);