Untitled

<!doctype html>
<html>
<body>
<canvas id="bezier" width="500px" height="500px" style="border: 1px solid black"></canvas>
<script>
    let canvas = document.getElementById('bezier');
    let ctx = canvas.getContext('2d');

    const SCALE = 100;
    let p0 = {
        x: 1,
        y: 1
    };
    let p1 = {
        x: 2,
        y: 3
    };
    let p2 = {
        x: 4,
        y: 3
    };
    let p3 = {
        x: 3,
        y: 1
    };

    // draw control points
    drawPoint(p0);
    drawPoint(p1);
    drawPoint(p2);
    drawPoint(p3);

    // draw points on bezier curve
    for (let i = 0; i <= 1; i += 0.005) {
        bezier(i, [p0, p1, p2, p3]);
    }

    function bezier(u, points) {
        let sum = {
            x: 0,
            y: 0
        };

        for (let i = 0; i < points.length; i++) {
            let b = bernstein(points.length - 1, i, u);
            sum.x += points[i].x * b;
            sum.y += points[i].y * b;
        }

        drawPoint(sum, 1);
    }

    function bernstein(n, i, t) {
        let binom = binomial(n, i);
        return binom * Math.pow(t, i) * Math.pow(1 - t, n - i);
    }

    function binomial(n, k) {
        let coeff = 1;

        for (let x = n - k + 1; x <= n; x++) {
            coeff *= x;
        }

        for (let x = 1; x <= k; x++) {
            coeff /= x;
        }

        return coeff;
    }

    function drawPoint(p, size = 3) {
        const HEIGHT = 500;
        ctx.fillRect(p.x * SCALE, HEIGHT - (p.y * SCALE), size, size);
    }
</script>
</body>
</html>