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/
You don't need to keep defining the canvas and setting the context. This handles sliding up: