How do I know what causes slow HTML5 canvas performance?

Question

How can I determine if the slow performance of the canvas is caused by the drawing itself or the underlying logic that computes what needs to be drawn and where?

Second part of my question: how to calculate canvas fps? Here, as I did, it seems logical to me, but I am also mistaken. Is this right to do?

var fps = 0;  
setInterval(draw, 1000/30);  
setInterval(checkFps, 1000);  

function draw() {  
   //...  
   fps++;  
}  

function checkFps() {  
   $("#fps").html(fps);  
   fps = 0;  
}

Edit: I replaced the above, according to Nathan's comments:

var lastTimeStamp = new Date().getTime();  
function draw() {  
    //...  
    var now = new Date().getTime();  
    $("#fps").html(Math.floor(1000/(now - lastTimeStamp)));  
    lastTimeStamp = now;  
}

, ? , . , , ( ), , .

Answer 1

FPS

setInterval(checkFps, 1000);  

, ( 1000 - , , ),

function checkFps() {  
   $("#fps").html(fps);  
   fps = 0;  
}

( fps 32, , 32 1,5 ( ))

beter , realtimepassed/frames ( , javascript , , , = ms )

fps - , ( ), , .

setInterval(draw, 1000/30);

, FPS 30, setInterval (, , , , FPS, )

Answer 2

Webkit Firebug , , javascript-. .

FPS , , : (

: (?) javascript . Javascript , .

, javascript, "" 1000 (, - ), setTimeout, , , 1000 .

, , fps draw(). , javascript , ?

Answer 3

Check if you are using any innerHTML method to debug your project. This can slow down your project in a way that you cannot imagine, especially if you do some concatenation like this innerHTML + = newDebugValues;

Or, as desau said, profile your CPU usage with firebug or an internal webkit debugger.