JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

JavaScript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var image1 = new Image();
image1.src = "http://24.media.tumblr.com/tumblr_mdrs5xzExW1rzb22so1_250.png";
var image2 = new Image();
image2.src = "http://24.media.tumblr.com/90465b3b6a901581274a31b6747db8c3/tumblr_mnig1u59cI1s5jjtzo1_400.gif";
var image3 = new Image();
image3.src = "https://33.media.tumblr.com/b832028c117cb548614cbea10f0153dc/tumblr_mudg73OFlK1rgpyeqo1_500.gif";
var image4 = new Image();
image4.src = "https://31.media.tumblr.com/d5384c966cd8625684ab2e2d786b27c0/tumblr_msf7g08uA01rcr3bio1_500.gif";
var image5 = new Image();
image5.src = "http://media.giphy.com/media/MtkKhHDM86tsQ/giphy.gif";

setInterval(function () {
                         ctx.fillStyle = "#888";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.drawImage(image1, 0, 0);
    ctx.drawImage(image2, 0, 0);
    ctx.drawImage(image3, -200, -200);
    ctx.drawImage(image4, 0, 40);
    ctx.drawImage(image5, 50, 200);
}, 3);