Canvas: Animate along a path

by rajeshpillai

HTML

<canvas id="canvas" width=350 height=350></canvas>

CSS

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

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "skyblue";
ctx.strokeStyle = "lightgray";
ctx.lineWidth = 3;

window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();


var pathArray = []
pathArray.push({
    x: 25,
    y: 250
});
pathArray.push({
    x: 150,
    y: 250
});
pathArray.push({
    x: 150,
    y: 50
});
pathArray.push({
    x: 250,
    y: 50
});
pathArray.push({
    x: 250,
    y: 100
});
var polypoints = makePolyPoints(pathArray);

var width = 15;
var height = 30;
var position = 0;
var speed = 2;
var rotation = 0;
var rotationSpeed = Math.PI / 60;
animate();

var fps = 60;

function animate() {
    setTimeout(function () {
        requestAnimFrame(animate);

        // calc new position
        position += speed;
        if (position > polypoints.length - 1) {
            return;
        }
        var pt = polypoints[position];

        rotation += rotationSpeed;

        // draw
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.beginPath();
        ctx.translate(pt.x, pt.y);
        ctx.rotate(rotation);
        ctx.rect(-width / 2, -height / 2, 15, 30);
        ctx.fill();
        ctx.stroke();
        ctx.restore();

    }, 1000 / fps);
}

function makePolyPoints(pathArray) {

    var points = [];

    for (var i = 1; i < pathArray.length; i++) {
        var startPt = pathArray[i - 1];
        var endPt = pathArray[i];
        var dx = endPt.x - startPt.x;
        var dy = endPt.y - startPt.y;
        for (var n = 0; n <= 100; n++) {
            var x = startPt.x + dx * n / 100;
            var y = startPt.y + dy * n / 100;
            points.push({
                x: x,
                y: y
           ...