Search code examples
javascripthtmlcanvasopen-sourcepong

Adding background image to a Javascript "Pong" game

As part of my studies i'm modifying some parts in an open-sourced "Pong" game I found online (created by Kushagra Agarwal).

Game's Fiddle

I'm trying to set a nice background image to the game, that will not disturb the gameplay experience.
I've tried many ways but so far Iv'e only managed to change the background color into a different color, but not to an actual image : 

// Function to paint canvas
function paintCanvas() {
    ctx.fillStyle = "blue/black/whatever";
    ctx.fillRect(0, 0, W, H);


Trying to work out ctx.fillStyle to display an image didn't went well since paintCanvas() is constantly looping, and if gets other value then a "color" string (for example a background image that weighs 500kb) it will create huge delays in the game.

Anyone has an idea?

Thank's, Roy

Solution

  • I think it looks nice if your just put a background image on the body tag!

    <body background="someImage">
</body>

    I commented out your paintCanvas(), inserted a clear, and inserted a body tag!

    http://jsfiddle.net/XLKFC/11/

    // Function to paint canvas
function paintCanvas() {
    canvas.width = canvas.width; // Will clear the canvas
    //ctx.fillStyle = "blue";
    //ctx.fillRect(0, 0, W, H);
}