Question

I am trying to make a simple game, though if I need an image for my bouncing ball then how do I do this?
I am doing this-

function draw() {
    ctx.clearRect(0, 0, 300, 300);
    if (ctx.getContext) {

            Snooker = new Image();
            Snooker.onload = loadingComplete;
            Snooker.src = "http://www.wpclipart.com/toys/balls/red_snooker_ball.png";
        }
    x += dx;
    y += dy;
    bounce();
}

And->

function init() {
    var ctx = document.getElementById("canvas");

    return setInterval(draw, 10);
}

Now canvas is blank.

Here is fiddle link-
http://jsfiddle.net/stackmanoz/QcLTw/1/

Image I want to add instead of this simple ball-
http://www.wpclipart.com/toys/balls/red_snooker_ball.png

Answer 1

Here is a working version of your script using the image instead of the arc. You would want to load an img using Javascript’s new Image() and then set the source to the image you want. Then use drawImage instead of arc.

http://jsfiddle.net/QcLTw/7/