JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <canvas id="myCanvas" width="600" height="600"></canvas>
</body>

CSS

body {
    margin: 0px;
    padding: 0px;
}

JavaScript

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;

// get canvas and create drawing context
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// create image
var img = document.createElement("img");

// fill image from data string
//img.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; // insert a dot image contains 1px

// or fill image from url
img.src = "http://www.w3schools.com/tags/img_the_scream.jpg"

var xSpeed = 0.05;  //px per ms
var ySpeed = 0.01;

function animate(nowTime, lastTime, xPos, yPos) {
    if ((img.style.width + xPos) > canvas.width) {
        xPos = 0;
        yPos = 0;
    }
    
    var timeDelta = nowTime - lastTime;
    var xDelta = xSpeed * timeDelta;
    var yDelta = ySpeed * timeDelta;
    
    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);

    //draw img
    context.drawImage(img, xPos, yPos);

    requestAnimationFrame(
        function(timestamp){animate(timestamp, nowTime, xPos + xDelta, yPos + yDelta)}
    );
}

animate(0, 0,  10, 1);