Canvas move object along a path

by rajeshpillai

HTML

<canvas id="canvas" width=600 height=400></canvas>

CSS

body {
        background-color: ivory;
    }
    canvas {
        border:1px solid red;
    }

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// set starting values
var fps = 60;
var percent = 0
var direction = 1;

// start the animation
animate();

function animate() {

    // set the animation position (0-100)
    percent += direction;
    if (percent < 0) {
        percent = 0;
        direction = 1;
    };
    if (percent > 100) {
        percent = 100;
        direction = -1;
    };

    draw(percent);

    // request another frame
    setTimeout(function () {
        requestAnimationFrame(animate);
    }, 1000 / fps);
}


// draw the current frame based on sliderValue
function draw(sliderValue) {

    // redraw path
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.lineWidth = 5;

    ctx.beginPath();
    ctx.moveTo(100, 20);
    ctx.lineTo(200, 160);
    ctx.strokeStyle = 'red';
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(200, 160);
    ctx.quadraticCurveTo(230, 200, 250, 120);
    ctx.strokeStyle = 'green';
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(250, 120);
    ctx.bezierCurveTo(290, -40, 300, 200, 400, 150);
    ctx.strokeStyle = 'blue';
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(400, 150);
    ctx.lineTo(500, 90);
    ctx.strokeStyle = 'gold';
    ctx.stroke();

    // draw the tracking rectangle
    var xy;

    if (sliderValue < 25) {
        var percent = sliderValue / 24;
        xy = getLineXYatPercent({
            x: 100,
            y: 20
        }, {
            x: 200,
            y: 160
        }, percent);
    } else if (sliderValue < 50) {
        var percent = (sliderValue - 25) / 24
        xy = getQuadraticBezierXYatPercent({
            x: 200,
            y: 160
        }, {
            x: 230,
            y: 200
        }, {
            x: 250,
            y: 120
        }, percent);
    } else if (sliderValue < 75) {
        var percent = (sliderValue - 50) / 24
        xy = getCubicBezierXYatPercent({
            x: 250,
            y: 120
...