CODEWITHSUNDEEP
htmlperformancetestingcanvassvg
dert detg
dert detg

Reputation: 303

How to test speed of javascript code - SVG vs CANVAS

I have two similar examples but one using SVG other using CANVAS:

WIth html5 canvas: http://jsbin.com/yepigu/5 With SVG: http://jsbin.com/yumova

I need to know which render is faster. What I need to use in my case? Is there some online tool for that or I need to make some timer into code ?

Upvotes: 0

Views: 377

Answers (1)

markE
markE

Reputation: 105035

To perf test the 2 alternatives, run each alternative while recording starting & ending times.

BTW, I reworked your canvas stroked line to work without shadowing which should speed that up:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var pts = [{x:22,y:59.45},{x:136,y:66},{x:170,y:99},{x:171,y:114},{x:183,y:125},{x:218,y:144},{x:218,y:165},{x:226,y:193},{x:254,y:195},{x:283,y:195},{x:292,y:202},{x:325,y:213},{x:341,y:134},{x:397,y:245},{x:417,y:548}];


ctx.lineCap='round';
ctx.lineJoin='round';
ctx.lineWidth=25;
ctx.strokeStyle='red';
drawPolyline(pts);
ctx.lineWidth=22;
ctx.strokeStyle='pink';
drawPolyline(pts);
ctx.lineWidth=2;
ctx.strokeStyle='blue';
drawPolyline(pts);

function drawPolyline(pts){
  ctx.beginPath();
  ctx.moveTo(pts[0].x,pts[0].y);
  for(var i=1;i<pts.length;i++){
    ctx.lineTo(pts[i].x,pts[i].y);
  }
  ctx.stroke();
}
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=600 height=600></canvas>

Upvotes: 1

Related Questions