JSFiddle - React, Tailwind, and code Playground

by ErikE

HTML

<canvas width="300" height="200"></canvas>

JavaScript

var canvas = document.getElementsByTagName('canvas')[0];
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var context = canvas.getContext('2d');
var img = new Image();

// All variable settings here
canvas.style.background = '#ccc';
img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
var periodPixels = 75;
var amplitudePixels = 50;
var dx = 1;

var x;
var yOffset;
var xOffset = 0;
var sineFactor = periodPixels / Math.PI / 2;
var imageWidth;
var imageHeight;
var animationWidth;
var advanceSine;
advanceSine = function () {
    x += dx;
    if (x >= animationWidth) {
        xOffset = (xOffset + imageWidth) % periodPixels;
        x -= imageWidth;
    }
    context.clearRect(0, 0, canvasWidth, canvasHeight);
    var drawOffset;
    for (drawOffset = x; drawOffset > -imageWidth; drawOffset -= imageWidth) {
        context.drawImage(img, drawOffset, yOffset + amplitudePixels * Math.sin((x + xOffset) / sineFactor), imageWidth, imageHeight);
    }
    requestAnimationFrame(advanceSine);
};
img.onload = function () {
    yOffset = (canvas.height - img.height) / 2;
    imageWidth = img.width;
    imageHeight = img.height;
    animationWidth = imageWidth + canvasWidth;
    x = canvasWidth;
    advanceSine();
};