JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<p>Results:
<p id="res">
<p>Canvas:
<p><canvas id="canvas" width="400" height="400"></canvas>
<br><br>
<p>Sprite:
<p><img id="img" src="http://lh6.ggpht.com/-TTZ5OhpPNOs/TaM83_mTXAI/AAAAAAAAH3E/HhB7AXAVBDQ/s128/chrome-a_512.png">

JavaScript

var ctx = document.getElementById('canvas').getContext('2d');
var img = document.getElementById('img');

var draw = function(load) {
    var angle = 0.01;
    ctx.clearRect(0,0,400,400);
    ctx.save();
    ctx.translate(200,200);
    for (var i=0; i<load; i++) {
        ctx.rotate(angle);
        ctx.drawImage(img, 0, 0);
    }
    ctx.restore();
};

var t, previousTime;
var drawLoad = 1;
var slowCount = 0;
var maxSlow = 10;

t = previousTime = window.performance.now();

var tick = function() {
    var maximumFrameTime = 1000/30; // 30 FPS
    t = performance.now();
    var elapsed = t - previousTime;
    previousTime = t;
    if (elapsed < maximumFrameTime || slowCount < maxSlow) {
        if (elapsed < maximumFrameTime) {
            drawLoad+=10;
        } else {
            slowCount++;
        }
        draw(drawLoad);
        webkitRequestAnimationFrame(tick);
    } else {
      // found maximum sustainable load at 30 FPS
      document.getElementById('res').innerHTML = ("could draw "+(drawLoad)+" in " + maximumFrameTime + " ms");
    }
};
webkitRequestAnimationFrame(tick);