JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<img src="/img/logo.png" alt="Canvas Image" id="imgSampleImage" />
<canvas id="myCanvas" width="400" height="300" style="border:1px solid #000;">
Sorry! your browser does not support Canvas.
</canvas>
 
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');  
var img = document.getElementById("imgSampleImage");  
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);  
imageData = ctx.getImageData(0, 0, width, height);  
ctx.putImageData(imageData, 0, 0);  
    </script>
</body>
</html>