Canvas fill methods comparison

JavaScript performance comparison

Test case created

Preparation code

<canvas id="view" width="300" height="300">
</canvas>
<script>
Benchmark.prototype.setup = function() {
    var canvas = document.getElementById("view");
    var context = canvas.getContext("2d");
    var color = "green";
    var radius = 100;
};
</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
c.fillStyle (before)
context.beginPath();
context.fillStyle = color;
context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
context.closePath();
pending…
c.fillStyle + c.fill (after)
context.beginPath();
context.arc(radius, radius, radius, 0, 2 * Math.PI, false);
context.fillStyle = color;
context.fill();
context.closePath();
pending…

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

Compare results of other browsers

0 comments

Add a comment