Html5 Canvas Composite Layers Invoking Long Frames

Question

I have a javascript client that runs on a web page, draws with requestAnimationFrame on the canvas and exchanges through websockets to my NodeJS server server (using the "ws" module on the server side).

Profiling with Chrome DevTools, it looks like the joint time for creating scripts, rendering and drawing each frame is only a few milliseconds. However, there are still long frames from 20 to 40 ms.

The timeline shows that in almost all of these cases there is a “response” that exceeds the frame length and / or “Composite layers” that occurs towards the end too.

This, essentially, is how I use requestAnimationFrame:

function drawGame() {

    // Drawing to gameCanvas from cacheCanvas
    // cacheCanvas is updated whenever an update is received from the server

    ctx.drawImage(cacheCanvas,
        // source rectangle
        0, 0,
        gameCanvas.width*2, gameCanvas.height*2,

        // destination
        100, 100,
        gameCanvas.width*2, gameCanvas.height*2
    );

    requestAnimationFrame(drawGame);
}

requestAnimationFrame(drawGame);

The server sends updates using setInterval () at 60hz. When a message is received from the server, the client immediately draws it. I suspect that this time may be incorrect when combined with requestAnimationFrame and results in composite layers at the end of the frame.

However, I am confused by why there is so much intermediate time between scenarios and “composite layers” for each frame. So that...

• Is there a way to control when "composite layers" are called?

• Should I save data from each update message and only draw it at the beginning of the next frame of the animation?

• What is a "response" referring to?

Thank!

Answer 1

Chrome, . . Chromium.

Firefox, , .

, .. - , .