pixel count matters

Benchmark created by roobster s on September 26, 2013

Description

Preparation HTML

<script type="text/javascript">
    document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>
<div>
<h1>Hidden Canvases</h1>
<canvas width=329 height=200 id="hide1" style="display:none"></canvas>
<canvas width=328 height=200 id="hide2" style="display:none"></canvas>
<h1>Canvas 1 (800x100) where the 100x100 is drawn</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 = 100;
    var data_width = 100;
    var data = [];
    
    function setup_data() {
      for (var i = 0; i < data_width; i++) {
        data[i] = [];
        for (var j = 0; j < 100; 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 < 100; 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 hide3 = $("#hide3")[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

draw_hidden(hide1_ctx);
c1_ctx.drawImage(hide1, 0, 0, width, 100, 0, 0, width, 100);

draw_hidden(hide2_ctx);
c1_ctx.drawImage(hide2, 0, 0, width, 100, 0, 0, width, 100);

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 September 26, 2013
• Revision 2: published by roobster s on September 26, 2013
• Revision 3: published on April 9, 2023