I am a *newb* when it comes to HTML5 and the infamous *Canvas* element. Currently, I have a blue ball drawn on my webpage and on click of the canvas element, the ball slides up to a position (Y) that I pass to a drawCircle function. I am wanting to *slideUp* the ball to the Y location, vs the ball jumping to the Y location.

Here is my code thus far:

```
    var context, canvas;
var x = 100;
var y = 200;
var dx = 5;
var dy = .02;

function drawCircle(move) {
    if(move) {
        x = move.x
        y = move.y
    }

    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d')
    context.clearRect(0,0,canvas.width, canvas.height);
    context.beginPath()
    context.fillStyle = "#0000ff";
    context.arc(x, y, 20, 0, Math.PI*2, true);
    context.closePath();
    context.fill();
    // if(x < 0 || x > canvas.width) dx=-dx;
    // if(y < 0 || y > canvas.height) dy =- dy;

    if(move) {
            y+=dy
    }

    // x+=dx
    // y+=dy
}

window.onload = function(e){
    // setInterval(drawCircle, 10)
    drawCircle()
    canvas.onclick = function(){
        var move = {
            x: 100,
            y: 100
        }
        drawCircle(move)
    }
}

```

JSFiddle: <http://jsfiddle.net/Uam8z/1/>