canvas rect vs circle (v3)

Revision 3 of this benchmark created on

Description

Comparison of drawing point as a circle and as a rectangle

Preparation HTML

<canvas id="canvas" width="1280" height="720"></canvas>

Setup

var c = document.getElementById('canvas').getContext("2d");
    c.clearRect(0, 0, 1280, 720);
    c.strokeStyle="#00F";
    c.beginPath();
    c.moveTo(0, 0);

Teardown


    c.stroke();
    if(Math.random() > 0.97) c.clearRect(0, 0, 1280, 720);

Test runner

Ready to run.

Testing in
TestOps/sec
line to
var d = 0; 
var x = Math.floor((Math.random()*1280)+1);
var y = Math.floor((Math.random()*720)+1);

c.lineTo(x, y);
 
ready
point as a circle
var x = Math.floor((Math.random()*1280)+1);
var y = Math.floor((Math.random()*720)+1);
c.beginPath();
c.arc(x, y, 5, 0, 2 * Math.PI, true);
c.fill();
ready
point as rectangle
var x = Math.floor((Math.random()*1280)+1);
var y = Math.floor((Math.random()*720)+1);
c.fillRect(x,y,5,5);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.