clip dither test (v3)

Revision 3 of this benchmark created on

Preparation HTML

<canvas id="myCanvas" width="32" height="40"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
var img = new Image();
img.src = canvas.toDataURL();
ctx.clearRect(0,0,canvasWidth, canvasHeight);
</script>

Setup

ctx.clearRect(0,0,canvasWidth, canvasHeight);

Test runner

Ready to run.

Testing in
TestOps/sec
no dither
ctx.drawImage(img, 0, 0);
ready
dither
for (var i = 0; i < canvasWidth; i++) {
  for (var j = 0; j < canvasHeight / 2; j++) {
    if (i % 2 == 0) {
      ctx.rect(i, j * 2, 1, 1);
    } else {
      ctx.rect(i, j * 2 + 1, 1, 1);
    }
  }
}
ctx.clip();
ctx.drawImage(img, 0, 0);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.