css - How does object-fit work with canvas element?

Question

I have been unable to find any documentation to tell me one way or another.

Am I able to use object-fit cover on a canvas elements? I have done some experimenting and it is not behaving as expected.

Can somebody give me a definitive answer?

Answer 1

object-fit¹ will only have an effect when there is a ratio change (a distortion) and applies to only replaced element (canvas is a replaced element)

Here is a basic example:

var canvas = document.querySelectorAll("canvas");
for (var i = 0; i < canvas.length; i++) {
  ctx = canvas[i].getContext("2d");
  ctx.fillRect(50, 50, 100, 100);
}

canvas {
  width: 100px;
  height: 250px;
  border: 1px solid red;
  display: block;
}

.box {
  display: inline-block;
  border: 2px solid green
}

<div class="box">
  <canvas width="200" height="200"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="object-fit:contain;"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="object-fit:cover;"></canvas>
</div>