JSFiddle - React, Tailwind, and code Playground

by Alvin Wan

HTML

<canvas id="canvas" width="10000" height="10000"></canvas>
<p id="times"></p>

JavaScript

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

console.log("Test starting...");
var times = [];
for (var i=0;i < 1000;i++) {
  var start = new Date().getTime();
  for (var j = 0;j < 10000;j++) {
    var x = Math.random() * 250;
    var y = Math.random() * 250;
    ctx.fillRect(x, y, i*100, i*100);
  }
  var end = new Date().getTime();
  times.push(end - start);
  ctx.clearRect(0, 0, 300, 300);
}

console.log("Test concluded")

console.log(times);
document.getElementById("times").innerHTML = times;