JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

window.requestAnimFrame = (function(){
	return window.requestAnimationFrame	|| 
	window.webkitRequestAnimationFrame	|| 
	window.mozRequestAnimationFrame		|| 
	window.oRequestAnimationFrame		|| 
	window.msRequestAnimationFrame		|| 
	function(callback){
		window.setTimeout(callback, 1000 / 60);
	};
})();
var numberOfObjects = 2000;
var canvas;
var ctx;
var objects = [];
var imgToDraw;
var coords = {x:100,y:100};
var radio = 30;

//PUSHING ELEMENTS
for(var i = 0; i < numberOfObjects; i++){
    objects.push({position:0});
}

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
imgToDraw = new Image();
imgToDraw.src = "http://png-1.findicons.com/files/icons/1579/devine/16/circle.png";
imgToDraw.onload = function(){
    draw();
};
ctx.imageSmoothingEnabled = false;

function draw(){
    window.requestAnimFrame(draw);
    ctx.fillStyle = 'white';
    ctx.fillRect(0,0,canvas.width,canvas.height);    
    for(var nObject = 0, len = objects.length, x= coords.x, y = coords.y; nObject < len; nObject++){
        ctx.setTransform(1,0,0,1,x, y);
        ctx.rotate(objects[nObject].position*0.01);
        ctx.translate(radio,0);
        ctx.drawImage(imgToDraw,0,0);
        objects[nObject++].position++;

        ctx.setTransform(1,0,0,1,x, y);
        ctx.rotate(objects[nObject].position*0.01);
        ctx.translate(radio,0);
        ctx.drawImage(imgToDraw,0,0);
        objects[nObject++].position++;

        ctx.setTransform(1,0,0,1,x, y);
        ctx.rotate(objects[nObject].position*0.01);
        ctx.translate(radio,0);
        ctx.drawImage(imgToDraw,0,0);
        objects[nObject++].position++;

        ctx.setTransform(1,0,0,1,x, y);
        ctx.rotate(objects[nObject].position*0.01);
        ctx.translate(radio,0);
        ctx.drawImage(imgToDraw,0,0);
        objects[nObject++].position++;
    }
    ctx.setTransform(1,0,0,1,0,0);
}