Bezier curve in Javascript

<canvas height="600" width="600" id="can"></canvas>
<script>
    window.onload = function(){
        var xt;
        var yt;
        var xab;
        var yab;
        var xbc;
        var ybc;
        var t;
        var xa = 10;
        var xb = 300;
        var xc = 590;
        var ya = 10;
        var yb = 590;
        var yc = 10;
        var can = document.getElementById("can");
        var ctx = can.getContext("2d");
        ctx.fillStyle = "black";
        ctx.fillRect(0,0,600,600);
        ctx.beginPath();
        ctx.moveTo(xa,ya)
        for(var i=0;i<=100;i++){
            t = i/100;
            xab = (xa-(xa-xb)*t);
            yab = (ya-(ya-yb)*t);
            xbc = (xb-(xb-xc)*t);
            ybc = (yb-(yb-yc)*t);
            xt = (xab-(xab-xbc)*t);
            yt = (yab-(yab-ybc)*t);
            ctx.lineTo(xt,yt);
        }
        ctx.lineWidth = 5;
        ctx.strokeStyle = "green";
        ctx.stroke();
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc(xa,ya,5,2*Math.PI,false);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(xb,yb,5,2*Math.PI,false);
        ctx.fill();
        ctx.beginPath();
        ctx.arc(xc,yc,5,2*Math.PI,false);
        ctx.fill();
    }
</script>