JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="640" height="480" id="mycanvas">

CSS

canvas{border:1px dotted black; margin-left:1em;}

JavaScript

function sprite(ipath, sh, sw, ih, iw){
        /* BASIC INFO FOR SPRITE */
            this.frameWidth = sw;
            this.frameHeight= sh;
            frame_rows = ih/sh;
            frame_columns = iw/sw;
            num_frames = frame_columns*frame_rows ;
            this.frame = new Array();
            frameNumber = 0;
            for(row = 0; row<frame_rows; row++){
                for(i=0;i<frame_columns;i++){
                    this.frame[frameNumber] = {};
                    this.frame[frameNumber].offsetX = this.frameWidth*i;
                    this.frame[frameNumber].offsetY = this.frameHeight*row;
                    frameNumber++
                }
            }
            this.sheight = sh;
            this.swidth = sw;
            this.raw = new Image();
            this.raw.src = ipath;
        }
            //this.animate = function
        animation=new sprite("http://www.melonjs.org/tutorial/tutorial_final/data/sprite/gripe_run_right.png",64,64,64,512);
        var canvas=document.getElementById("mycanvas");
        context = canvas.getContext("2d");
        

var my_gradient = context.createLinearGradient(0, 0, canvas.width, canvas.height);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, canvas.width, canvas.height);
context.font = "bold 12px sans-serif";
context.fillStyle = "red"
canvastext="This be a string! YARRRRR!"
context.fillText(canvastext, 58, 165);
context.drawImage(animation.raw, animation.frame[0].offsetX, animation.frame[0].offsetY, animation.frameWidth, animation.frameHeight, 0, 0, animation.frameWidth,animation.frameHeight)