canvg vs canvas (v10)

Revision 10 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" />

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
// 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
< 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 >
ready

Revisions

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