HTML 5 Canvas performance

Question

I'm just started on playing around with the canvas HTML5-object. For the sake of performance tests, I have made a little ping pong game.

Are there any performance improvements I could use?

The ball seems to be blue with a touch of red, but my declaration it should be yellow. How can I fix this?

Answer 1

This should help you with the ball color;

function drawBall (x, y, r) {
    ctx.beginPath();
    ctx.fillStyle = "yellow";
    ctx.arc(x, y, r, 0, Math.PI*2, false);
    ctx.closePath();
    ctx.fill(); //added
    fps++;
}

function drawP1 (h) {
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, h, 20, 100);
    //ctx.fill(); // remove in P2 also
    fps++;
    return true;
};

fill() doesn't apply to fillRect(), the latter is drawing a filled rectagle and fill() is to fill pathes.

There's not much you can improve with an simple pong game, but i'll give some general advices for canvas performance:

• fillStyle/strokeStyle calls are expensive, avoid switching colors.
• drawing complex shapes is expensive, too. you can draw then and use the pixel api to render them
• try to keep rendering and processing separated, this will give you space for improvements
• try to use pure js for high FPS games/animations

As said, very general advices and might not be appropriate for every case.