clip dither test (v5)

Revision 5 of this benchmark created by madmonkey 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;

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

var canvas4 = document.createElement("canvas");
var ctx4 = canvas4.getContext("2d");
canvas4.width = canvasWidth;
canvas4.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, 1);
                        } else {
                                ctx2.rect(i, j * 2, 1, 1);
                        }
                }
        }
        ctx2.clip();
        
        for (var i = 0; i < canvasWidth/2; i++) {
                for (var j = 0; j < canvasHeight/2; j++) {
                        if (i % 2 == 0) {
                                ctx3.rect(i*2, j * 2 + 1, 1, 1);
                        } else {
                                ctx3.rect(i*2, j * 2, 1, 1);
                        }
                }
        }
        ctx3.clip();
        
        for (var i = 0; i < canvasWidth; i++) {
                for (var j = 0; j < canvasHeight/4; j++) {
                        if (i % 2 == 0) {
                                if (i % 4 == 0) {
                                        ctx4.rect(i, j*4+3, 1, 1);
                                }else{
                                        ctx4.rect(i, j*4+1, 1, 1);
                                }
                        } else {
                                ctx4.rect(i, j*4, 1, 1);
                                ctx4.rect(i, j*4+2, 1, 1);
                        }
                }
        }
        ctx4.clip();
</script>

Setup

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

Test runner

Ready to run.

Testing in
TestOps/sec
no dither
ctx.drawImage(img,0,0);
ready
dither pattern 1
ctx4.drawImage(img,0,0);
ctx.drawImage(canvas4,0,0);
ready
dither pattern 2
ctx2.drawImage(img,0,0);
ctx.drawImage(canvas2,0,0);
ready
dither pattern 3
ctx3.drawImage(img,0,0);
ctx.drawImage(canvas3,0,0);
ready

Revisions

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