clip dither test (v4)

Revision 4 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;

var canvas2 = document.createElement("canvas");
var ctx2 = canvas2.getContext("2d");
canvas2.width = canvasWidth;
canvas2.height = canvasHeight;

ctx2.fillStyle = 'red';
ctx2.fillRect(0, 0, canvasWidth, canvasHeight);
var img = new Image();
img.src = canvas2.toDataURL();
ctx2.clearRect(0,0,canvasWidth,canvasHeight);

for (var i = 0; i < canvasWidth; i++) {
  for (var j = 0; j < canvasHeight / 2; j++) {
    if (i % 2 == 0) {
      ctx2.rect(i, j * 2, 1, 1);
    } else {
      ctx2.rect(i, j * 2 + 1, 1, 1);
    }
  }
}
ctx2.clip();
</script>

Setup

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

Test runner

Ready to run.

Testing in
TestOps/sec
no dither
ctx.drawImage(img,0,0);
ready
off canvas dither
ctx2.drawImage(img,0,0);
ctx.drawImage(canvas2,0,0);
ready

Revisions

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