canvg vs canvas (v14)

Revision 14 of this benchmark created 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" />

<div id="cont"></div>

Setup

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

Test runner

Ready to run.

Testing in
TestOps/sec
canvg
// async test
canvg(canvas, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="none"><defs><linearGradient id="grad2" x1="100%" y1="0%" x2="0%" y2="0%"><stop stop-color="#FFFFFF" offset="0%"/><stop stop-color="#aaaaaa" offset="100%"/></linearGradient></defs><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90" height="90" viewBox="0 0 50 50" overflow="visible" preserveAspectRatio="none"><path fill="#3399FF" d="M25,50C11.214,50,0,38.785,0,25S11.214,0,25,0c13.785,0,25,11.215,25,25S38.784,50,25,50L25,50z"/><circle fill="#000000" fill-opacity="0.3"  cx="25.806" cy="25.918" r="23"/><circle cx="25" cy="25" r="23.148" style="fill:url(#grad2);" /></svg></svg>', {
  ignoreMouse: true,
  ignoreAnimation: true,
  ignoreDimensions: true,
  renderCallback: function() {
    deferred.resolve();
  }

});
ready
generated canvas
data = {};
data.width = 90;
data.height = 90;
data.viewbox_width = 100;
data.viewbox_height = 100;
data.stroke_linejoin = "butt";
data.stroke_width = 2.0;
data.opacity = 1.0;
data.stroke = "#3399FF";
data.fill = "#FFFFFF";
data.rx = 3;
data.ry = 3;
data.gradient = true;
data.stop_color_1 = data.fill;
data.stop_multiply_color_2 = "#aaaaaa";

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 / 5E1), (data.height / 5E1))) * (-1E0)) * 0E0), (((Math.min((data.width / 5E1), (data.height / 5E1))) * (-1E0)) * 0E0));
ctx.scale((data.width / 5E1), (data.height / 5E1));
ctx.save();
ctx.fillStyle = (data.stroke === 'none') ? 'rgba(0,0,0,0)' : data.stroke;
ctx.font = '10px sans-serif';
ctx.beginPath();
ctx.moveTo(2.5E1, 5E1);
ctx.bezierCurveTo(1.1214E1, 5E1, 0E0, 3.8785E1, 0E0, 2.5E1);
ctx.bezierCurveTo(0E0, 1.1215E1, 1.1214E1, 0E0, 2.5E1, 0E0);
ctx.bezierCurveTo(3.8785E1, 0E0, 5E1, 1.1215E1, 5E1, 2.5E1);
ctx.bezierCurveTo(5E1, 3.8785E1, 3.8784E1, 5E1, 2.5E1, 5E1);
ctx.lineTo(2.5E1, 5E1);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.save();
ctx.fillStyle = '#000000';
ctx.fillStyle = 'rgba(0,0,0,.3)';
ctx.font = '10px sans-serif';
ctx.beginPath();
ctx.arc(2.5806E1, 2.5918E1, 2.3E1, 0.0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.save();
if (!data.gradient) {
  ctx.fillStyle = (data.fill === 'none') ? 'rgba(0,0,0,0)' : data.fill;
}
if (data.gradient) {
  var linearGradient = ctx.createLinearGradient(4.8148E1, 1.852E0, 1.852E0, 1.852E0);
  linearGradient.addColorStop(0E0, data.stop_color_1 === 'none' ? 'rgba(0,0,0,0)' : data.stop_color_1);
  linearGradient.addColorStop(1E0, data.stop_multiply_color_2 === 'none' ? 'rgba(0,0,0,0)' : data.stop_multiply_color_2);
  ctx.fillStyle = linearGradient;
}
ctx.font = '10px sans-serif';
ctx.beginPath();
ctx.arc(2.5E1, 2.5E1, 2.3148E1, 0.0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
ctx.restore();
ready
svg
container.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="90" height="90" viewBox="0 0 50 50" preserveAspectRatio="none"> <defs> <linearGradient id="grad2" x1="100%" y1="0%" x2="0%" y2="0%"> <stop stop - color="#FFFFFF" offset="0%" /> <stop stop - color="#aaaaaa" offset="100%" /> </linearGradient> </defs> <path fill="#3399FF" d="M25,50C11.214,50,0,38.785,0,25S11.214,0,25,0c13.785,0,25,11.215,25,25S38.784,50,25,50L25,50z" /> <circle fill="#000000" fill - opacity="0.3" cx="25.806" cy="25.918" r="23" /> <circle cx="25" cy="25" r="23.148" style="fill:url(#grad2);" /> </svg>';
ready

Revisions

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