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 imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-norwegian-forest-cat.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRl2MT7Xo3thiowjv6RtP0rtBjp8a3LNo3foDTR_6b8RIuWbZDw';

imgArray[2] = new Image();
imgArray[2].src = 'http://static.planetminecraft.com/files/avatar/1921957_2.jpg';

imgArray[3] = new Image();
imgArray[3].src = 'http://www.kozaczek.pl/avatars/1228921442.jpg';

imgArray[4] = new Image();
imgArray[4].src = 'http://www.gamerheadlines.com/forum/uploads/profile/photo-434.jpg?_r=1395759749';

imgArray[5] = new Image();
imgArray[5].src = 'http://www.avatarsdb.com/avatars/the_cat_with_boots.jpg';


setInterval(function () {
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.drawImage(imgArray[0], 0, 100);
    ctx.drawImage(imgArray[1], 50, 300);
    ctx.drawImage(imgArray[2], 150, 150);
    ctx.drawImage(imgArray[3], 200, 200);
    ctx.drawImage(imgArray[4], 300, 0);
    ctx.drawImage(imgArray[5], 120, 0);
}, 1);