canvg vs canvas (v4)

Revision 4 of this benchmark created by Kerry Liu on

Description

Testing for string parsing overhead.

Preparation HTML

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js">
</script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js">
</script>
<canvas id="test" />

Setup

var canvas = document.getElementById("test");
    canvas.width = 500;
    canvas.height = 500;
    var ctx = canvas.getContext("2d");
    ctx.translate(50, 50);

Test runner

Ready to run.

Testing in
TestOps/sec
canvg
canvg(canvas, '<svg><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="100" viewBox="0 0 100 100" overflow="visible" preserveAspectRatio="none"><rect rx="5.0" ry="5.0" width="100" height="100" vector-effect="non-scaling-stroke" non-scaling-corners="true" stroke-width="5" opacity="1.0" stroke="black" fill="red"  /></svg></svg>', {
  ignoreMouse: true,
  ignoreAnimation: true,
  ignoreDimensions: true
});
ready
generated canvas
data = {};
data.width = 400;
data.height = 100;
data.viewbox_width = 100;
data.viewbox_height = 100;
data.stroke_linejoin = "miter";
data.stroke_width = 5.0;
data.opacity = 1.0;
data.stroke = "black";
data.fill = "red";
data.rx = 5.0;
data.ry = 5.0;

ctx.save();
ctx.strokeStyle='rgba(0,0,0,0)';
ctx.lineCap='butt';
ctx.lineJoin='miter';
ctx.miterLimit=10.0;
ctx.font='10px sans-serif';
ctx.save();
ctx.strokeStyle='rgba(0,0,0,0)';
ctx.lineCap='butt';
ctx.lineJoin='miter';
ctx.miterLimit=10.0;
ctx.font='10px sans-serif';
ctx.translate(-(Math.min((data.width/data.viewbox_width),(data.height/data.viewbox_height)))*0.000000,-(Math.min((data.width/data.viewbox_width),(data.height/data.viewbox_height)))*0.000000);
ctx.scale((data.width/data.viewbox_width),(data.height/data.viewbox_height));
ctx.translate(-0.000000,-0.000000);
ctx.save();
ctx.fillStyle=data.fill;
ctx.strokeStyle=data.stroke;
ctx.lineWidth=data.stroke_width;
ctx.lineJoin=data.stroke_linejoin;
ctx.font='10px sans-serif';
ctx.globalAlpha=data.opacity;
ctx.beginPath();
ctx.moveTo((0.000000+data.rx),0.000000);
ctx.lineTo((100.000000-data.rx),0.000000);
ctx.quadraticCurveTo(100.000000,0.000000,100.000000,(0.000000+data.ry));
ctx.lineTo(100.000000,(100.000000-data.ry));
ctx.quadraticCurveTo(100.000000,100.000000,(100.000000-data.rx),100.000000);
ctx.lineTo((0.000000+data.rx),100.000000);
ctx.quadraticCurveTo(0.000000,100.000000,0.000000,(100.000000-data.ry));
ctx.lineTo(0.000000,(0.000000+data.ry));
ctx.quadraticCurveTo(0.000000,0.000000,(0.000000+data.rx),0.000000);
ctx.closePath();
ctx.save();
ctx.scale((1.000000/((1.000000*(data.width/data.viewbox_width))*1.000000)),(1.000000/((1.000000*(data.height/data.viewbox_height))*1.000000)));
ctx.beginPath();
ctx.moveTo(((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))+data.rx),(0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000)));
ctx.lineTo((((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))+(100.000000*((1.000000*(data.width/data.viewbox_width))*1.000000)))-data.rx),(0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000)));
ctx.quadraticCurveTo(((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))+(100.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))),(0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000)),((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))+(100.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))),((0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))+data.ry));
ctx.lineTo(((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))+(100.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))),(((0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))+(100.000000*((1.000000*(data.height/data.viewbox_height))*1.000000)))-data.ry));
ctx.quadraticCurveTo(((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))+(100.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))),((0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))+(100.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))),(((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))+(100.000000*((1.000000*(data.width/data.viewbox_width))*1.000000)))-data.rx),((0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))+(100.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))));
ctx.lineTo(((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))+data.rx),((0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))+(100.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))));
ctx.quadraticCurveTo((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000)),((0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))+(100.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))),(0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000)),(((0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))+(100.000000*((1.000000*(data.height/data.viewbox_height))*1.000000)))-data.ry));
ctx.lineTo((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000)),((0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000))+data.ry));
ctx.quadraticCurveTo((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000)),(0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000)),((0.000000*((1.000000*(data.width/data.viewbox_width))*1.000000))+data.rx),(0.000000*((1.000000*(data.height/data.viewbox_height))*1.000000)));
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
ctx.restore();
ctx.restore();
ready

Revisions

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