Search code examples
performancehtmlcanvasgeometric-arc

HTML 5 Canvas performance

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?

Solution

  • 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.