my image is displaying as a box not a hexagon

I want to make these hexagons in a grid-like pattern, but they are not sized properly and dont pack as tightly as I would like because they are box sprites. I checked the PNG in my file explorer and it does not have any background, it is just the hexagons.

hexagons

document.getElementById("Button1").addEventListener("click", myFunction);

function myFunction() {
  createCanvas();
}

function drawHexagon(x, y, scale) {
  const c = document.getElementById("hexagonCanvas");
  const ctx = c.getContext("2d");
  const img = document.getElementById("whex");
  ctx.drawImage(img, x, y, 4 * scale / Math.sqrt(3), scale);
}

function createCanvas() {
  let n = 100;
  let hex = new Array(n);
  for (let i = 0; i < n; i++) {
    hex[i] = new Array(n);
    for (let j = 0; j < n; j++) {
      hex[i][j] = false;
      let scale = 100;
      let y = 2 * scale * i + scale;
      let x = 2 * scale * Math.sqrt(3) * j;
      if (j % 2 == 1) {
        y += scale;
      }
      //console.log(x + " " + y + " " + i + " " + j);
      drawHexagon(x, y, scale);
    }
  }

}
<img src="https://images.vexels.com/media/users/3/139198/isolated/lists/89ce93222bff9f1e4f6195d164d0c8bf-hexagon-shape-stroke-icon.png" id="whex" class="hola">
<canvas id="hexagonCanvas" width="2000" height="2000" style="border:1px solid grey;"></canvas>
<button id="Button1">Try it</button>
<p id="demo"></p>
<script src="hexGame.js"></script>