I am making a 2d game with JavaScript and HTML5 and am trying to move an image that I have drawn with JavaScript like so:

    //canvas
    var c = document.getElementById("gameCanvas");
    var ctx = c.getContext("2d");
    //baseball
    var baseball = new Image();
    baseball.onload = function() {
        ctx.drawImage(baseball, 400, 425);
    };
    baseball.src = "baseball2.png";

I'm not sure how I would move it though, I have seen many people seem to just type something like ballX and ballY but I don't understand where the actual x and y definition comes from. Here is my code so far:

http://jsfiddle.net/xRfua/

I have a different image source but it is a local source so I couldn't include it. Thanks in a dvance for any help!