JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Infinite scrolling with canvas</h4>
<h5></h5>
<canvas id="canvas" width=500 height=143></canvas><br>

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

// thanks Paul Irish for this RAF fallback shim
window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();


var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var infiniteImage;
var infiniteImageWidth;
var img = document.createElement("img");
img.onload = function () {

    // use a tempCanvas to create a horizontal mirror image
    // This makes the panning appear seamless when
    // transitioning to a new image on the right
    var tempCanvas = document.createElement("canvas");
    var tempCtx = tempCanvas.getContext("2d");
    tempCanvas.width = img.width * 2;
    tempCanvas.height = img.height;
    tempCtx.drawImage(img, 0, 0);
    tempCtx.save();
    tempCtx.translate(tempCanvas.width, 0);
    tempCtx.scale(-1, 1);
    tempCtx.drawImage(img, 0, 0);
    tempCtx.restore();
    infiniteImageWidth = img.width * 2;
    infiniteImage = document.createElement("img");
    infiniteImage.onload = function () {
        pan();
    }
    infiniteImage.src = tempCanvas.toDataURL();
}
img.crossOrigin = "anonymous";
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/mountain.jpg";


var fps = 60;
var offsetLeft = 0;

function pan() {

    // increase the left offset
    offsetLeft += 1;
    if (offsetLeft > infiniteImageWidth) {
        offsetLeft = 0;
    }

    ctx.drawImage(infiniteImage, -offsetLeft, 0);
    ctx.drawImage(infiniteImage, infiniteImage.width - offsetLeft, 0);

    setTimeout(function () {
        requestAnimFrame(pan);
    }, 1000 / fps);
}