HTML5 Canvas path benchmark ('source-over' composition mode)

Canvas Path Benchmark …… ? 8

This example benchmarks the time taken to draw a line consisting of 5000 separate segments into an HTML5 Canvas.

It is derived from this example which performs the same Canvas benchmark but with another (non-default: 'source-over') composition mode, called 'destination-atop', which won't render identically to the SVG benchmark here.

When you want to observe the different canvas composition modes and their effect on timing, check out this benchmark; you will notice that different browsers will render different views as canvas composition mode support is not complete for many of them.

The Canvas results are faster than those measured by the equivalent SVG Path Benchmark, but mind the huge differences between the major browsers: Opera and IE9 have their SVG act together while the others are sluggish.

source: gist.github.com/gists/3331937

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Path Benchmark</title>
    <style type="text/css">
      body { margin: 0px 10px; }
      h1 { font-size: 1.3em; line-height: 1.0em; }
      table { font-size: 0.8em; margin: 0px 10px; padding: 2px }
      th { text-align: center; font-weight: bold; padding: 0px  10px 0px 10px; }
      td { text-align: center; font-weight: normal; padding: 0px  10px 0px 10px; }
      ul.hlist { display: inline-block; list-style-type: none; margin: 0px; padding-left: 15px; }
      ul.hlist li { display: inline-table; vertical-align: top; list-style-type: none }
      #canvas { width: 400px; height: 400px; padding:0px;
        background-color: #eeeeee; color:gray; border: solid 1px #cccccc }
    </style>
    <script type="text/javascript">
      window.requestAnimFrame = (function() {
        return window.requestAnimationFrame ||
               window.webkitRequestAnimationFrame ||
               window.mozRequestAnimationFrame ||
               window.oRequestAnimationFrame ||
               window.msRequestAnimationFrame ||
               function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
                 return window.setTimeout(callback, 1000/60);
               };
      })();
      window.cancelRequestAnimFrame = (function() {
        return window.cancelCancelRequestAnimationFrame ||
               window.webkitCancelRequestAnimationFrame ||
               window.mozCancelRequestAnimationFrame ||
               window.oCancelRequestAnimationFrame ||
               window.msCancelRequestAnimationFrame ||
               window.clearTimeout;
      })();
    </script>
</head>
<body>
  <h1>Canvas Path Benchmark</h1>
  <p id="user-agent"></p>
  <ul class="hlist">
    <li><canvas id="canvas"></canvas></li>
    <li>
      <table>
        <thead>
          <th>Line Segments</td>
          <th>Elapsed Time</td>
          <th>Time of Last Set</td>
        </thead>
        <tbody id="results"></tbody>
      </table>
    </li>
  </ul>
  <script type="text/javascript">
    window.onload=function() {

var user_agent = document.getElementById("user-agent");
      user_agent.innerHTML = navigator.userAgent;

var canvas = document.getElementById("canvas");
      canvas.width = canvas.clientWidth;
      canvas.height = canvas.clientHeight;

var half_width  = canvas.width / 2;
      var half_height = canvas.height / 2;

var xpos = half_width;
      var ypos = half_height;

var ctx = canvas.getContext('2d');
      ctx.globalCompositeOperation = "source-over";
      ctx.lineWidth = 1;
      ctx.strokeStyle = "rgba(255,65,0, 1.0)";

var i, j;

var factor = 15;
      var factor_div_2 = factor / 2;
      var correction = 0.0035;

function addLineSegments(num) {
        for (i=0; i < num; i++) {
          ctx.beginPath();
          ctx.moveTo(xpos, ypos);
          xpos += (factor * Math.random() - factor_div_2) + (half_width  - xpos) * correction;
          ypos += (factor * Math.random() - factor_div_2) + (half_height - ypos) * correction;
          ctx.lineTo(xpos, ypos);
          ctx.closePath();
          ctx.stroke();
        }
      };

var results = document.getElementById("results");
      var table_row, table_data;

function addToResults(samples, elapsed_time, sample_time) {
        table_row = document.createElement('tr');
        table_data = document.createElement('td');
        table_data.innerHTML = samples;
        table_row.appendChild(table_data);
        table_data = document.createElement('td');
        table_data.innerHTML = elapsed_time;
        table_row.appendChild(table_data);
        table_data = document.createElement('td');
        table_data.innerHTML = sample_time;
        table_row.appendChild(table_data);
        results.appendChild(table_row);
      };

var increment = 250;
      var count = 0;
      var elapsed_time = 0;
      var sample_time, sample_start, sample_end;

function runSet() {
        sample_start = +new Date();
        addLineSegments(increment);
        sample_end = +new Date();
        sample_time = sample_end-sample_start;
        elapsed_time += sample_time;
        count += increment;
        addToResults(count, elapsed_time, sample_time);
      }

function benchmark(){
        if (count < 5000) {
          requestAnimFrame(benchmark, canvas);
          runSet();
        }
      };
      requestAnimFrame(benchmark, canvas);
    };
  </script>
</body>
</html>