JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

"use strict";
var canvas = document.getElementById("idCanvas");
canvas.width = 800;
canvas.height = 600;

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

var image = new Image();
image.src = "http://i.imgur.com/o0uki3v.png";

var RENDER = function () {}
RENDER.prototype.render = function (squares) {
    
    var lastTime = 0,
        w = canvas.width,
        h = canvas.height,
        iw = image.width,
        ih = image.height;

    ctx.fillStyle = "#000000";

    function main(newTime) {
        var dt = (newTime - lastTime) * 0.001;

        ctx.clearRect(0, 0, w, h);

        for (var i = 0, l = squares.length; i < l; i++) {
            var s = squares[i];
            if (s.visible) {
                s.dy += 400 * dt;
                s.x += s.dx * dt;
                s.y += s.dy * dt;
                if (s.x < 0 || s.x > w) s.dx *= -1;
                if (s.y + ih > h) {
                    s.dy *= -0.85
                    if (Math.random() > 0.5) {
                        s.dy -= Math.random() * 100;
                    }
                }
                //ctx.transform(1, 0, 0, 1, s.x, s.y);
                ctx.drawImage(image, s.x, s.y, iw, ih);
            }
        }

        ctx.fillText("FPS: " + (1 / dt).toFixed(0), 20, 20);

        requestAnimationFrame(main);
        lastTime = newTime;
    }
    requestAnimationFrame(main);
}

var squares = [];
for (var i = 0; i < 16500; i++) {
    var square = {
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        r: 0,
        dx: Math.random() * 500,
        dy: Math.random() * 200,
        visible: true
    };
    squares.push(square);
}
var r = new RENDER();
r.render(squares);