canvas_toBlob.html | Explore in Territory

<!DOCTYPE html>
<html>
<body>
    <canvas id='drawCanvas' width='200' height='200' >
<script>
var drawCanvas;
var drawCtx;
var testCanvas;
var testCtx;
var rotateNum = 0;

function draw() {
    drawCtx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
    for (var i = 0; i < 4; i++) {
      for (var j = 0; j < 4; j++) {
        drawCtx.fillStyle = 'rgb(' + (255 - 40 * i - 2 * rotateNum) + ',' + (255 - 50 * j) 
                        + ',' + (255 - 12 * rotateNum)+ ')';
        drawCtx.fillRect(j * 50, i * 50, 50, 50);
        rotateNum = (rotateNum + 1) % 20;
      }
    }
    requestAnimationFrame(draw);
}

function changeTestCanvas() {
    testCtx.clearRect(0, 0, testCanvas.width, testCanvas.height);
    testCtx.fillStyle = 'rgb(' + (255 - 12 * rotateNum) + ',' + (255 - 12 * rotateNum)
                        + ',' + (255 - 12 * rotateNum) + ')';
    testCtx.fillRect(0, 0, 4000, 4000);
}

function runTest() {
  changeTestCanvas();
  testCanvas.toBlob(function(blob) {
      runTest();
  });
}

window.onload = function () {
    drawCanvas = document.getElementById("drawCanvas");
    drawCtx = drawCanvas.getContext("2d");
    testCanvas = document.createElement("canvas");
    testCanvas.width = 4000;
    testCanvas.height = 4000;
    testCtx = testCanvas.getContext("2d");

    draw();
    runTest();
};
</script>
</body>
</html>
chromium/tools/perf/page_sets/tough_canvas_cases/canvas_toBlob.html
