<canvas id="canvas"></canvas>
let canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;
// Point A
let startX = 50, startY = 50;
// Point B
let endX = 420, endY = 200;
// Current position of the ball
let x = startX, y = startY;
update();
function update() {
context.clearRect(0, 0, width, height);
drawBall(x, y, 30);
x = lerp(x, endX, 0.1);
y = lerp(y, endY, 0.1);
requestAnimationFrame(update);
}
function drawBall(x, y, radius) {
context.beginPath();
context.fillStyle = '#66DA79';
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fill();
}
function lerp(min, max, fraction) {
return (max - min) * fraction + min;
}
window.addEventListener('click', e => {
endX = e.pageX;
endY = e.pageY;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.