JavaScript: HTML5 and sliding a ball up the page

Question

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/

Answer 1

You can use the setInterval function like your code suggested, this is how I did it..

    var context, canvas;
    var x = 100;
    var y = 200;
    var dx = 5;
    var dy = 5; //0.02 makes it move v. slowly!

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

        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();
    }

    window.onload = function(e){
        canvas = document.getElementById('myCanvas');
        context = canvas.getContext('2d');
        drawCircle()
        var interval;
        canvas.onclick = function(){
           if(interval) //don't run if already doing so..
                return;
            var end_move = {
                x: 100,
                y: 100
            };
            var interval = setInterval(function(){
                if(x === end_move.x && y === end_move.y){
                     //stop animation case..
                     clearInterval(interval);
                     interval = undefined;
                } else {
                    var newX;
                    if(Math.abs(x - end_move.x) < dx){
                       newX = x;
                    } else {
                        newX = (x > end_move.x) ? x-dx : x+dx;
                    }
                    var newY;
                    if(Math.abs(y - end_move.y) < dy){
                       newY = y;   
                    } else {
                        newY = (y > end_move.y) ? y-dy : y+dy;
                    }
                    drawCircle({
                        x: newX,
                        y: newY
                    });  
                }
            }, 10);
        }
    }

The code sets up an end_position where he ball should end up. It then sets up an interval to move it the same distance on each iteration, when it gets close to the desired position, it ensures that the interval terminates by setting the position to be the desired one.

Answer 2

You don't need to keep defining the canvas and setting the context. This handles sliding up:

var context, canvas, target;
var x = 100;
var y = 200;
var dx = 5;
var dy = 2; //.2 is pretty slow

function drawCircle() {

    // sliding up
    if (y > target) {
        y -= dy;
    }
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath()
        context.fillStyle = "#0000ff";
        context.arc(x, y, 20, 0, Math.PI * 2, true);
        context.fill();
        context.closePath();

}

window.onload = function () {

    // get canvas, and context once
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2d');

    // set target y position
    canvas.onclick = function (e) {
        target = e.clientY;
    }
    // 30fps
    setInterval(drawCircle, (1000 / 30));
}