pixel count matters (v3)

Revision 3 of this benchmark created on

Description

Does number of pixels matter?

It does. General rule: keep your canvases less than 65536 pixels in Chrome!

When running some tests (binary search) 65536 seemed like the turning point. This made sense - at some point maybe internally the browser needed to use a different data type.

The odd thing is that it is not exactly 65536, ~ 65776, which doesn't really make a ton of sense.

Preparation HTML

<script type="text/javascript">
    document.write("\<script src='https://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>
<div>
<h1>Hidden Canvases</h1>
<canvas width=2056 height=32 id="hide1" style="display:none"></canvas>
<canvas width=2055 height=32 id="hide2" style="display:none"></canvas>
<h1>Visible canvas (copy dst)</h1>
<canvas width=800 height=100 id="c1"></canvas>
</div>

Setup

function lookup(val) {
      if (val == 0)
        return "#0000d4";
      else if (val == 1)
        return "#00496d";
      else if (val == 2)
        return "#ff2400";
      else if (val == 3)
        return "55aa00";
      return "ffffff";
    }
    
    //generate data
    var width = 32;
    var data_width = width;
    var data = [];
    var height = 32;
    var data_height = height;
    
    function setup_data() {
      for (var i = 0; i < data_width; i++) {
        data[i] = [];
        for (var j = 0; j < data_height; j++) {
          data[i][j] = Math.floor(Math.random() * 5)
        }
      }
    }
    
    function draw_hidden(ctx,a,b) {
      var lim = (b - a) || width
      for (var x = 0; x < lim; x++) {
        for (var y = 0; y < height; y++) {
          ctx.beginPath();
          ctx.moveTo(x, y);
          ctx.strokeStyle = lookup(data[(x + a) || x][y]);
          ctx.lineTo(x + 1, y);
          ctx.lineWidth = 1;
          ctx.stroke();
        }
      }
    }
    
    setup_data();
    
    var hide1 = $("#hide1")[0];
    var hide2 = $("#hide2")[0];
    
    var hide1_ctx = hide1.getContext('2d');
    var hide2_ctx = hide2.getContext('2d');
    
    var c1 = $("#c1")[0];
    
    var c1_ctx = c1.getContext('2d');

Test runner

Ready to run.

Testing in
TestOps/sec
larger (2056x32)
draw_hidden(hide1_ctx);
c1_ctx.drawImage(hide1, 0, 0, width, height, 0, 0, width, height);
ready
smaller (2055x32)
draw_hidden(hide2_ctx);
c1_ctx.drawImage(hide2, 0, 0, width, height, 0, 0, width, height);
ready

Revisions

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

  • Revision 1: published by roobster s on
  • Revision 2: published by roobster s on
  • Revision 3: published on