JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<canvas id="canvas"></canvas>

JavaScript

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

canvas.width = 3000;
canvas.height = 600;

var box = {x:10, y:250, width:50,height:50};

function render(){
    box.x+=10;
    if(box.x > canvas.width){box.x=0;}
    ctx.clearRect(0,0,3000,600);
    ctx.fillRect(box.x,box.y,box.width,box.height);
    track(box.x, box.y, window.innerWidth/2, 0);
    setTimeout(render, 10);
}

function track(x,y, offsetX, offsetY){
    var trackX = x - (canvas.offsetLeft + offsetX);
        trackY = y - (canvas.offsetTop + offsetY);

    window.scrollTo(trackX, trackY);
            
}
render();