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 lastTime = 0;
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);
}

function main(newTime){
    var dt = (newTime - lastTime)/1000;

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

    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 > canvas.width)s.dx*=-1;
            if (s.y+image.height > canvas.height){
                s.dy *= -0.85
                if (Math.random()>0.5){
                    s.dy -=Math.random()*100;
                }
            }
            ctx.drawImage(image, s.x, s.y);
        }
    }


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

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

main(0);