How to draw an image (with object-fit:cover css style) into canvas?

Question

In my web page, image applies the css style object-fit. When I tried to draw an image into canvas, found that image in canvas is different from origin one, this is a problem, how to fix it?

.image-item {
  object-fit: cover;
}

I tried those code, but image in canvas is not same as the origin .

export const ImageToCanvas = (image: HTMLImageElement) => {
  const canvas = document.createElement('canvas');

  canvas.width = image.width;
  canvas.height = image.height;
  canvas.getContext('2d')?.drawImage(image, 0, 0);

  return canvas;
};

export const canvasToImage = (canvas: HTMLCanvasElement) => {
  const image = new Image();
  image.src = canvas.toDataURL('image/png');

  return image;
};

export const downloadImage = (image: HTMLImageElement, name: string) => {
  const link = document.createElement('a');

  link.download = name;
  link.href = image.src;
  link.click();
};