Heatmap Stress Test (Canvas)

HTML

<div class="visualization-container">
    <canvas class="visualization" width="640" height="480"></canvas>
</div>

CSS

.visualization {
    border: 1px solid black;
}

JavaScript

// Function to create random CSS color
function randomHue() {
    return 'rgb(' + Math.floor(256 * Math.random()) + ',' + Math.floor(256 * Math.random()) + ',' + Math.floor(256 * Math.random()) + ')';
}

// NOTE: Try 100 nRows 1638 nCols 1 test and keep running. Heatmap sometimes draws sometimes doesn't!

// Parameters
var nTests = 20; // Number of tests
var nRows = 1000; // Numbers of rows
var nCols = 1638; // Number of columns

var vis = $(".visualization")[0]; // The visualization element
var colWidth = 20; // Column width
var colHeight = 20; // Column height
var times = []; // Test timing container

// Re-set the visualization area
vis.width = nCols * colWidth;
vis.height = nRows * colHeight;

// Loop through tests
for (var iTest = 0; iTest < nTests; iTest++) {

    // Start timer
    var start = +new Date();

    /*
     * BEGIN TEST
     */

    // Get 2D canvas context 
    var ctx = vis.getContext('2d');

    // Loop and draw canvas
    for (var iRow = 0; iRow < nRows; iRow++) {
        for (var iCol = 0; iCol < nCols; iCol++) {
            ctx.fillStyle = randomHue();
            ctx.fillRect(iCol * colWidth, iRow * colHeight, colWidth, colHeight);
        }
    }

    /*
     * END TEST
     */

    // End timer
    var end = +new Date();
    var diff = end - start;

    times.push(diff);
}

// Collect timing stats
var avg = 0;
for (var iTime = 0; iTime < times.length; iTime++) {
    avg += times[iTime] / times.length;
}

// Print
alert('Visualization of ' + nRows + ' x ' + nCols + ' (rows x cols) takes ~' + Math.round(avg) + ' ms (averaged over ' + nTests + ' tests)');