Canvas integer coordinates vs. coordinates + .5

Benchmark created by thissideup on

Description

Compares the performance of HTML5 canvas drawing functions in case integer coordinates are given and in case coordinates are offset by .5 pixel; third test compares the performance in case integer coordinates are used, but the canvas transformation matrix is offset by .5 pixels. Test consists of sequential rendering of 100 1px wide vertical lines at 5px intervals.

Preparation HTML

<canvas id="canvas" width="512" height="224"></canvas>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  
  ui.benchmarks[2].setup = function() {
        ctx.setTransform(1, 0, 0, 1, 0.5, 0.5);
  };
  ui.benchmarks[0].teardown = 
  ui.benchmarks[1].teardown = function() {
        ctx.clearRect(0, 0, 512, 224);
  };
  ui.benchmarks[2].teardown = function() {
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, 512, 224);
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Integer X
ctx.beginPath();
for (var i = 0, x = 0; i < 100; i++, x = i * 5) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, 224);
}
ctx.stroke();
 
ready
X + .5
ctx.beginPath();
for (var i = 0, x = 0; i < 100; i++, x = i * 5) {
        ctx.moveTo(x + 0.5, 0);
        ctx.lineTo(x + 0.5, 224);
}
ctx.stroke();
ready
Integer X on a transformed canvas
ctx.beginPath();
for (var i = 0, x = 0; i < 100; i++, x = i * 5) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, 224);
}
ctx.stroke();
 
ready

Revisions

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

  • Revision 1: published by thissideup on