4

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?

Vilius
  • 1,169
  • 5
  • 19
  • 32
  • 4
    Could you state that as a question, please? What problem are you specifically trying to solve? – Robusto Apr 18 '10 at 13:13
  • I'm trying to fill my ball with yellow color, but it somehow becomes blue - just like the paddle... – Vilius Apr 18 '10 at 13:17
  • I think you have multiple intervals running. – elias Apr 18 '10 at 13:36
  • I've uploaded a new version of the game. No I put the drawBall-method on the end of draw(), so that the front color remains white (i've changed from yellow to white). But there is also a small blue "tail" hanging on the ball - maybe a second interval? – Vilius Apr 18 '10 at 13:43

1 Answers1

4

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.

elias
  • 1,481
  • 7
  • 13
  • Just tryed it - but no difference. And as said at the mozilla-homepage: "Note: When calling the fill method any open shapes will be closed automatically and it isn't necessary to use the closePath method." - I just don't get it, why it is not working – Vilius Apr 18 '10 at 13:19
  • Ok, thank you very much - removing of the fill()-method was the solution! – Vilius Apr 18 '10 at 13:55