JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="480" height="300" id="output"></canvas>
<br><br>
    <img id="newimg" src="http://placehold.it/480x300/ffffff/000000">

CSS

canvas {
    border: 1px solid black;
    background-image: url(http://placehold.it/480x300/000000/ffffff);
    background-size: contain;
}

JavaScript

var outputCanvas = document.getElementById('output'),
	ctx = outputCanvas.getContext('2d'),
    eWidth = 50,
    speed = 5,
    cWidth = 480,
    img = document.getElementById('newimg'),
    x = 0, y = 0,
    reqAnimFrame = window.mozRequestAnimationFrame    ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame     ||
        window.oRequestAnimationFrame;

ctx.drawImage(img, 0, 0, img.width, img.height);
ctx.globalCompositeOperation = "destination-out";

function draw() {
    console.log(x);
    gradient = ctx.createLinearGradient(x, 0, x+eWidth, 0);
    gradient.addColorStop(0, "rgba(255, 255, 255, 0)");
    gradient.addColorStop(1, "rgba(255, 255, 255, 1)");
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, img.width, img.height);
}

function animate() {
    if (x < 480) {
        x += Math.floor((cWidth / 1000) * speed);
        console.log(x);
        draw();
        reqAnimFrame(animate);
    }
}

reqAnimFrame(animate);