JSFiddle - React, Tailwind, and code Playground

HTML

<p>
the original image:
</p>
<img id="img_cam" src="https://4.bp.blogspot.com/-k8IX2Mkf0Jo/U4ze2gNn7CI/AAAAAAAA7xg/iKxa6bYITDs/s0/HOT+Balloon+Trip_Ultra+HD.jpg" width="400">
<p>
the canvas with drawn image:
</p>
<canvas id="imgcanvas" width="400"></canvas>

JavaScript

var canvas = document.getElementById("imgcanvas");
var img_can = document.getElementById("img_cam");
var ctx = canvas.getContext("2d");
var imgWidth = img_can.width;
var imgHeight = img_can.height;
canvas.width = imgWidth;
canvas.height = imgHeight;
ctx.drawImage(img_can, 0, 0, imgWidth, imgHeight);