JSFiddle - React, Tailwind, and code Playground

JavaScript

// create image
    var image = document.createElement('img');
            
            // set src using remote image location
            image.src = '/img/sprites.png';
            
            // wait til it has loaded
            image.onload = function (){
                
            // set up variables
            var fWidth = image.width;
            var fHeight = image.height;
            
            // create canvas
            var canvas = document.createElement('canvas');
            canvas.id = 'canvas';
            canvas.width = fWidth;
            canvas.height = fHeight;
            var context = canvas.getContext('2d');

            // draw image to canvas
            context.drawImage(image, 0, 0, fWidth, fHeight, 0, 0, fWidth, fHeight);
            
            // get data url
            dataUrl =  canvas.toDataURL('image/jpeg');
            
            // this image when saved is
            document.write('<img src="' + dataUrl + '" />');
            
            }