fillRect vs moveTo,lineTo

JavaScript performance comparison

Revision 7 of this test case created by e

Info

canvas fillRect vs moveTo,lineTo

Preparation code

<canvas id="c" width="100" height="100"></canvas>
<canvas id="d" width="100" height="100"></canvas>
<script>
  c = document.getElementById('c');
  ctx = c.getContext('2d');
  ctx.lineWidth = 1;

  d = document.getElementById('d');
  ctx2 = d.getContext('2d');
  ctx2.lineWidth = 1;

var devicePixelRatio = window.devicePixelRatio || 1
      , canvasWidth = 100
      , canvasHeight = 100;
  d.width = canvasWidth * devicePixelRatio;
  d.height = canvasHeight * devicePixelRatio;
ctx2.scale(devicePixelRatio, devicePixelRatio);
</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,100,100);
ctx.fillRect(0,0,100,1);
 
pending…
moveTo,lineTo
ctx2.clearRect(0,0,100,100);
ctx2.fillRect(0,0,100,1);
pending…
drawImage
ctx.clearRect(0,0,100,100);
ctx.fillRect(0.5,0.5,100,1);
pending…
ctx.clearRect(0,0,100,100);
ctx.beginPath();
ctx.moveTo(0.5,0.5);
ctx.lineTo(100,1);
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