Is there a way to smoothly move an object over a line in HTML5 without leaving old objects behind? I need help achieving a seamless movement of a ball across a line.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(10, 10);
context.lineTo(400, 10);
context.stroke();
function clickToAddBall() {
// Do something
}
function gameLoop() {
var loop = 400;
setInterval(function() {
loop = loop - 10;
drawABall(loop);
}, 200);
}
gameLoop();
function drawABall(positionX) {
context.beginPath();
context.arc(positionX, 10, 5, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
}