JSFiddle - React, Tailwind, and code Playground

by Yann Bane

HTML

<html>
    <head>
    </head>

    <body>
        <canvas id="c" width="100px" height="100px"></canvas>
        <p id="times"></p>
        <p id="inside">Time to render inside: </p>
        <p id="outside">Time to render outside: </p> <br />

        <p>Once:</p>
        <p id="sinside">Time to render inside: </p>
        <p id="soutside">Time to render outside: </p> <br />

        <p id="ratio">Ratio (inside/outside): </p>
    </body>
</html>

JavaScript

var nTests = 1000000;
document.getElementById("times").innerHTML += nTests + " times:";

var test = function(x, y) {
    var startTime = new Date().getTime();

    for (var i = 0; i < nTests; i++) {
        if (x < width && y < height && x + img.width > 0 && y + img.height > 0)
        ctx.drawImage(img, x, y);
    }

    return new Date().getTime() - startTime;
}

var begin = function() {
    inside = test(10, 10);
    outside = test(959, 399);

    document.getElementById("inside").innerHTML += inside + "ms";
    document.getElementById("outside").innerHTML += outside + "ms";

    document.getElementById("sinside").innerHTML += inside / nTests + "ms";
    document.getElementById("soutside").innerHTML += outside / nTests + "ms";

    document.getElementById("ratio").innerHTML += inside / outside + "";
}

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

ctx.clearRect(0, 0, 100, 100);

var width = canvas.width;
var height = canvas.height;

console.log(width + height);

var img = new Image();
img.src = "http://www.freegaming.de/components/images/Gordon%20Freeman:%20SoundBoard.jpg";

img.onload = begin;