HTML & JS: Canvas wrap drawn Image

Question

I'm drawing a image with an array of pixel like this:

draw(data) {

  const div = document.createElement('div');
  div.className = 'prediction-div';

  const canvas = document.createElement('canvas');
  canvas.className = 'prediction-canvas';
  const ctx = canvas.getContext('2d');

  const label = document.createElement('div');
  label.innerHTML = 'Label';

  let pixelArray = data.reshape([28, 28]);
  pixelArray = pixelArray.dataSync();

  const imgData = ctx.createImageData(28, 28);

  for (let i = 0; i < pixelArray.length; i++) {
    const j = i * 4;
    imgData.data[j + 0] = pixelArray[i] * 255;
    imgData.data[j + 1] = pixelArray[i] * 255;
    imgData.data[j + 2] = pixelArray[i] * 255;
    imgData.data[j + 3] = 255; // tranparancy
  }
  ctx.putImageData(imgData, 0, 0);

  div.appendChild(canvas);
  div.appendChild(label);
  document.getElementById('predictionResult').appendChild(div);
}

As you can see I'm creating a html canvas. The problem is, the canvas has a certain height and it seems like the image has only a percentage of its height. So when I change height of the canvas via css, the image scales with it. Like this:

I want the canvas to wrap the drawn image. So I can change the height of the canvas without having so much space around the actual image.

How can I do this?