fillRect vs moveTo,lineTo

JavaScript performance comparison

Revision 3 of this test case created

Info

canvas fillRect vs moveTo,lineTo

Preparation code

<canvas id="c" width="100" height="100"></canvas>
<canvas id="d" width="1" height="4"></canvas>
<script>
  c = document.getElementById('c');
  ctx = c.getContext('2d');
  c.width = 900;
  c.height = 500;
  ctx.lineWidth = 1;
</script>
<script>
Benchmark.prototype.setup = function() {
    function do_rand() {
          x = Math.random() * 450;
          y = Math.random() * 500;
          width = Math.random() * 450;
        }
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
fillRect
ctx.clearRect(0,0,900,500);
do_rand();
ctx.fillRect(x,y,width,1);
pending…
moveTo,lineTo
ctx.clearRect(0,0,900,500);
do_rand();
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(width,y);
ctx.stroke();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment