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 = 30000;
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();
};


function draw(){
        window.requestAnimFrame(draw);
        ctx.clearRect(0,0,canvas.width,canvas.height);
         for(
            var nObject = 0,
            len = objects.length,    // cache these
            x = coords.x,
            y = coords.y; nObject < len; nObject++
        ){
            var banPrint = true;
            for(nOverlap = nObject; nOverlap < objects.length; nOverlap++){
                if(
                    objects[nOverlap].position == objects[nObject].position
                    && nOverlap != nObject
                ){
                    banPrint = false;
                    break;
                }
            }
            if(banPrint === true){
                ctx.setTransform(1,0,0,1, x, y);   // sets absolute transformation
                ctx.rotate(objects[nObject].position*0.01);
                ctx.translate(radio,0);
                ctx.drawImage(imgToDraw,0,0);
            }
            objects[nObject].position++;
        }
}