JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://placekitten.com/g/300/300" alt="A cute kitten" id="kitten">
<canvas width="300" height="300"></canvas>

CSS

canvas {
  border: 1px solid #000;
}

JavaScript

// NOTE: jsfiddle runs this code in a window.onload event, so we know that an image inserted with <img> has already been loaded when this code executes.

var img = document.getElementById('kitten');
var ctx = document.querySelector('canvas').getContext('2d');

ctx.drawImage(img, 0, 0);