JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvasWrap">
  <canvas id="canvas"></canvas>
  <img id="image" src="https://hips.hearstapps.com/countryliving.cdnds.net/17/47/1511194376-cavachon-puppy-christmas.jpg">
</div>

CSS

#image {
  /* display: none; */
  width: 100%;
}

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

const image = document.getElementById("image");

window.onload = () => {
  imageStyle = getComputedStyle(image);
  imageWidth = parseInt(imageStyle.getPropertyValue("width"),10);
  imageHeight = parseInt(imageStyle.getPropertyValue("height"),10);
  canvas.width = imageWidth;
  canvas.height = imageHeight;

  //ImageWidth and ImageHeight will equal the percentage size as pixels if image is display: none
  console.log(imageWidth);
  console.log(imageHeight);
  
    context.drawImage(image,0 , 0, imageWidth, imageHeight);
}