JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="file">
<script>
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const file = document.getElementById('file')
file.addEventListener('change', e => {
  const image = document.createElement('img');
  image.addEventListener('load', e => {
    canvas.width = image.width
    canvas.height = image.height
    ctx.drawImage(image, 0, 0);
    document.body.appendChild(canvas)
  });
  image.src = URL.createObjectURL(event.target.files[0])
})
// Styles for better visibility, not required for the minimal test case:
canvas.style.maxWidth = '100%'
canvas.style.background = 'black'
</script>