fillRect vs moveTo,lineTo

JavaScript performance comparison

Revision 5 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>

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);
ctx.fillRect(5,10,190,1);
ctx.fillRect(25,20,290,1);
ctx.fillRect(55,30,90,1);
ctx.fillRect(60,60,325,1);
ctx.fillRect(200,110,290,1);
ctx.fillRect(400,220,490,1);
ctx.fillRect(500,400,100,1);
pending…
moveTo,lineTo
ctx.clearRect(0,0,900,500);
ctx.beginPath();
ctx.moveTo(5,10.5);
ctx.lineTo(195,10.5);
ctx.moveTo(25,20.5);
ctx.lineTo(315,20.5);
ctx.moveTo(55,30.5);
ctx.lineTo(145,30.5);
ctx.moveTo(60,60.5);
ctx.lineTo(385,60.5);
ctx.moveTo(200,110.5);
ctx.lineTo(490,110.5);
ctx.moveTo(400,220.5);
ctx.lineTo(890,220.5);
ctx.moveTo(500,400.5);
ctx.lineTo(600,400.5);
ctx.stroke();
pending…
drawImage
ctx.clearRect(0,0,900,500);
ctx.fillRect(5,10,190,4);
ctx.fillRect(25,20,290,4);
ctx.fillRect(55,30,90,4);
ctx.fillRect(60,60,325,4);
ctx.fillRect(200,110,290,4);
ctx.fillRect(400,220,490,4);
ctx.fillRect(500,400,100,4);
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