Bezier SVG vs Canvas

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<div id="svgContainer"></div>
<canvas id="canvas1" width="800" height="400"></canvas>
<script>
Benchmark.prototype.setup = function() {
    function SVGDrawBezierCurve(x1, y1, x2, y2, x3, y3, x4, y4){
                        var container = document.getElementById("svgContainer");
                        var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                        mySvg.setAttribute("version", "1.2");
                        mySvg.setAttribute("baseProfile", "tiny");
                        container.appendChild(mySvg);
   
   
                        var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
                        shape.setAttributeNS(null, "d", "M100,100 C150,150 300,150 400,100");
                        shape.setAttributeNS(null, "fill", "none");
                        shape.setAttributeNS(null, "stroke", "green");
                       
                        mySvg.appendChild(shape);
                }
               
                function CanvasDrawCubicBezier(x1, y1, x2, y2, x3, y3, x4, y4)
                {
                        //var canvas = document.createElement('canvas');
                        var canvas = document.getElementById("canvas1");
                   
                    var context = canvas.getContext('2d');
                       
                        //Draw thin blue lines
                        context.lineWidth = 1;
                    context.strokeStyle = 'darkblue';              
                        context.beginPath();
                        context.moveTo(x1, y1);
                        context.bezierCurveTo(x2, y2, x3, y3, x4, y4);
                        context.stroke();                      
                }
};
</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
Canvas Bezier
CanvasDrawCubicBezier(100, 100, 150, 150, 300, 150, 400, 100);
pending…
SVG Bezier
SVGDrawBezierCurve(100, 100, 150, 150, 300, 150, 400, 100);
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:

1 comment

Martin von Gagern commented :

This test will likely burn a lot of resources in the creation of the canvas and svg objects, and in adjusting the page layout. The actual drawing operations might be negligible in comparison. To test these, drawing multiple lines into the same canvas / svg would help.

Add a comment