CODEWITHSUNDEEP
javascripthtmlcanvassvg
user3022030
user3022030

Reputation: 25

Svg vs Canvas and rendering times for circle objects

So i have done an webpage that tests rendering times times for SVG and Canvas. Test were done for diffrent browsers. I tought that Canvas will be better then SVG but from my test i see that Canvas has a problem with bigger objects and circle objects. I have results of my test here:

http://lezag2.linuxpl.info/wykresT2.html - this are reslts for 50.000 rectangles with a=500 pixsels

http://lezag2.linuxpl.info/wykresT4.html - this are results for 50.000 circles with r=250 pixels

I use simple code to generate objects on page. Canvas:

var ctx = document.getElementById('canvas').getContext('2d');
for(var i=0;i<50000;i++){
ctx.beginPath();
var centreX = Math.random() * 1000;
var centreY = Math.random() * 1000;
var radius = 50;
var startAngle = 0 * Math.PI/180;
var endAngle = 360 * Math.PI/180;
ctx.arc(centreX,centreY,radius,startAngle,endAngle,false);
ctx.fillStyle = "rgb("+Math.floor(Math.random()*256)+","+ Math.floor(Math.random()*256)+","+ Math.floor(Math.random()*256)+")";;
ctx.fill();
ctx.closePath();
}

And SVG:

for (var i = 0; i < 50000; i++) {
var x = Math.random() * 1000,
    y = Math.random() * 1000;
var circ = document.createElementNS(svgns, 'circle');
circ.setAttributeNS(null, 'cx', x);
circ.setAttributeNS(null, 'cy', y);
circ.setAttributeNS(null, 'r', 50);
circ.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16));
document.getElementById('svgOne').appendChild(circ);
}

I am wondering why Canvas has such bad times compared to SVG. I tryd to google my problem but found only very comlpex tests. Could some one explain me why canvas has such bad times?? Also do i name it good - i mean rendering times??

EDIT

I forgot to show how i mesure rendering time.

befTime = (new Date()).getTime();
{
(drawing function)
}
var actTime = (new Date()).getTime(); 
var testTime = (actTime-befTime)/1000;

Thats why i asked if i dont name it wrong by saying "rendering time"

Upvotes: 1

Views: 826

Answers (1)

GameAlchemist
GameAlchemist

Reputation: 19294

You cannot infer from your tests that svg is faster or slower than canvas, for several reasons :

minor reasons :

  • closePath is not necessary, especially after filling.
  • you recompute start/end angle on each loop for canvas.
  • fillStyle has to be converted 'rgb(...)' in canvas and not in svg.

more important reason :

  • drawing 50.000 canvas of 500 radius on a 1000X1000 canvas leads to a per-pixel overdraw of... 78500 !!! This has just NOTHING to do with a real-use case, which is very annoying to get any conclusion out of it.

even more important reason :

  • you do not draw in synch (using requestAnimationFrame), so it is certain that your canvas code is often waiting for its buffer to be able to draw.

killing reason :

  • You do not measure the render time of svg, just the svg creation + add to DOM time.
    Not a single pixel is drawn in your svg loop : the actual render will be performed AFTER the javascript code returns : only then it will see that a reflow is necessary, and repaint everything.
    AFAIK every browsers have only one thread for all operations going on a page : so your program will fully stop for rendering, during a time that you do not measure as of now.

Rq : You could try to measure svg draw time by using a short setInterval and seeing how many times really elapsed in between two calls instead of the real interval : this is the time when the system was stuck rendering.

Bottom line : you are comparing the time to create DOM objects and add them to the document vs the time to render circles on a out-of-sync canvas. No conclusion can be drawn out of those figures.

Upvotes: 3

Related Questions