JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="sample" width="500" height="400"></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://la.cdnmob.org/file_exchange/java_game_images/games/5/4905/real/2.jpg';
var count = 0;
var clip_y = 0;
function draw(){
var clip_x = 0;
var clip_width = 300;
var clip_height = 2;
ctx.fillRect(0,0,1000,300);
if(sprite_sheet.ready){
for (var x = 0; x!=300; x++){
clip_y+=1;
if(clip_y>=sprite_sheet.height){
clip_y=0;
}
ctx.drawImage(sprite_sheet, clip_x, clip_y, clip_width, clip_height ,250-(x*Math.sin(count)*2),x,10+(x*4),2);
count+=.000025;
}
}
}
setInterval(draw,16);