JSFiddle - React, Tailwind, and code Playground

JavaScript

/**
 
 Motion blur an image upwards.
 
 */

function motionBlur(image, amount) {

    var originalAmount = amount;
    var canvas = document.createElement('canvas');
    var ctx;
    var width = image.width;
    var height = image.height;
    var opacity;

    // if canvas isn't supported, just return the original image.
    if (!amount || !canvas.getContext) {
        return image;
    }

    canvas.width = width;
    canvas.height = height + amount;

    ctx = canvas.getContext('2d');

    while (amount--) {

        opacity = 1 / (originalAmount - amount);
        
        ctx.fillStyle = 'rgba(255,255,255,' + opacity + ')';

        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.drawImage(image, 0, 0, width, height + amount);

    }

    return canvas;

}

var foo = new Image();

foo.onload = function() {
    document.body.appendChild(motionBlur(foo, 32));
};

foo.src = "http://www.veryicon.com/icon/png/System/Arcade%20Daze/Cherry%20Bonus.png";