fillRect vs moveTo,lineTo

JavaScript performance comparison

Revision 8 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);
ctx2.fillText("Hello world!",20,20);
 
pending…
moveTo,lineTo
ctx2.clearRect(0,0,100,100);
ctx2.fillText("Hello world!",20,20);
ctx2.fillText("Hello world!",20,20);
pending…
drawImage
ctx.clearRect(0,0,100,100);
ctx.fillRect(0.5,0.5,100,1);
pending…
ctx2.clearRect(0,0,100,100);
ctx2.beginPath();
ctx2.moveTo(0,0);
ctx2.lineTo(100,1);
ctx2.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