title: How to to measure when 2 functions are done one web page?
body: <p>So i am writing a page with will measure load time of drawing the same thing but one in SVG and one in Canvas. </p>
  
  <p>It draws squares in random positions and page loads after drawing both - svg taking more time. But both times are the same and it looks like its time from Canvas drawing. Method i use to see load time is simple a just take date from start of the function and from end. This way i know how much time it takes. But when i try the same trick on the other drawing it gives me same time - first one (Canvas) </p>
  
  <p>What i do wrong?? Or maybe i cant do it on one page ??</p>
  
  <p>My code that looks like this:</p>
  
  <pre><code>function draw(){
  before = (new Date()).getTime();
  //Draw Canvas
  var ctx = document.getElementById('canvas').getContext('2d');
  for(var i=0;i&lt;10000;i++){
  
      //code for drawing Canvas- works and is not important in this question
  
  }
  
  //load time  Canvas                 
  var after = (new Date()).getTime(); 
  var sec = (after-before)/1000; 
  var renTime = document.getElementById("loadingtime"); 
  renTime.innerHTML = "Figury Canvas rysowały się: " + sec + " sekund."; 
  
   // draw svg 
  
   beforeSVG = (new Date()).getTime();
  
  for (var i = 0; i &lt; 100000; i++) {
  
      //code for drawing SVG - works and is not important in this question
  
  }
  
  //load time SVG                 
   var afterSVG = (new Date()).getTime(); 
   var secSVG = (after-before)/1000; 
   var renTimeSVG = document.getElementById("loadingtimeSVG"); 
   renTimeSVG.innerHTML = "Figury rysowały się: " + secSVG + " sekund."; 
  }
  </code></pre>