JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="sample" width="800"></canvas>
JavaScript
var sample = document.getElementById('sample');
var ctx = sample.getContext('2d');
var sprite_sheet = new Image();
sprite_sheet.onload = function(){
this.ready = true;
}
sprite_sheet.src = 'http://randomhoohaas.flyingomelette.com/Sprites/Sonic-Gen1.gif';
var count = 0;
function draw(){
var clip_x = 0;
var clip_y = 0;
var clip_width = 2;
var clip_height = 48;
ctx.fillRect(0,0,1000,300);
if(sprite_sheet.ready){
for (var x = 0; x!=200; x++){
ctx.drawImage(sprite_sheet, x*2, clip_y, clip_width, clip_height ,x*4,Math.sin(count)*2,4,96);
count+=.25;
}
}
}
setInterval(draw,16);