How Does Object-Fit Work with Canvas Element

How does object-fit work with canvas element?

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>

Understanding object-fit CSS property

From the specification:

The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

So it's neither the parent element nor the containing block but the element itself. It's a relation between the element and it's content. object-fit change the behavior of the content based on the dimension of the element.

Example with different elements sharing the same containing block:

img {
  object-fit: cover;
  border: 2px solid;
  width: 200px;
  height: 200px
}

<img src="https://picsum.photos/id/10/500/400">
<img src="https://picsum.photos/id/10/800/400">
<img src="https://picsum.photos/id/10/500/1000">
<img src="https://picsum.photos/id/10/600/300">

Why is object-fit: contain/cover; not having an effect?

Because you are not specifying a value for height or width in the <img>.

<div style="width: 280px; height: 500px;">    <img src="https://images.squarespace-cdn.com/content/v1/574dd66227d4bdb54a2f65e3/1521843944609-NYRD2YRLOP9HS2DLEB1F/ke17ZwdGBToddI8pDm48kCXjNEzRU16vKqZHoJ2wibt7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmtB678DRWVwYkSJZ19In_Ne5N2qo9t2w4kU5BfgrfRFnilh4mrZ2YFQG_bi7COdB2/BL_Website_ETD_rt_profile_store_v1.jpg" alt="something" style="object-fit: contain; height: 180px"> </div>

Object-fit doesn't work with fixed width and height

specify your image to the block

specify both height and width:

width: 100%;
height: 100%;

use object-fit: cover or object-fit: fill

.block {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

.block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="block">
  <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Sample Image">
</div>

Get a canvas object from an IMG element

HTMLImageElement.prototype.getCanvasFromImage = function(){
  const canvas = document.createElement('canvas');
  canvas.width = this.width;
  canvas.height = this.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(this, 0, 0);
  return canvas;
};


const img = document.getElementById('myImage');
img.onload = () => {
  const canvas  = img.getCanvasFromImage();
  const dataURL = canvas.toDataURL();

  console.log(dataURL);
}

<img id="myImage" crossorigin="anonymous" src="https://dl.dropbox.com/s/zpoxft30lzrr5mg/20201012_102150.jpg" />

How Does Object-Fit Work with Canvas Element