quadraticCurveTo

by Divya Manu

JavaScript

function _getQBezierValue(t, p1, p2, p3) {
    var iT = 1 - t;
    return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
}

function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
    return {
        x:    _getQBezierValue(position, startX, cpX, endX),
        y:    _getQBezierValue(position, startY, cpY, endY)
    };
}

(function() {

    var position = 0.0;
    var startPt = {x: 120, y: 10};
    var controlPt = {x: 410, y: 250};
    var endPt = {x: 10, y: 450};
    var canvas = document.createElement("canvas");
    canvas.width = canvas.height = 500;
    document.body.appendChild(canvas);
    var ctx = canvas.getContext("2d");
    function drawNextPoint() {
        var pt = getQuadraticCurvePoint(startPt.x, startPt.y, controlPt.x, controlPt.y, endPt.x, endPt.y, position);
        position = (position + 0.006) % 1.0;
        
        ctx.fillStyle = "rgba(255,0,0,0.5)";
        ctx.fillRect(pt.x - 1, pt.y - 1, 3, 3);
    }

    ctx.strokeStyle = "black";
    ctx.moveTo(startPt.x, startPt.y);
    ctx.quadraticCurveTo(controlPt.x, controlPt.y, endPt.x, endPt.y);
    ctx.stroke();


    setInterval(drawNextPoint, 40);
}());