HTML5 Game - Canvas Bezier function

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Bezier Curve

Introduction

Bezier curves with native Javascript code without ctx.bezierCurveTo.

Demo

ResultView the demo in separate window 

<!doctype html>
<html>

<body>

    <script>
        bezier = function(t, p0, p1, p2, p3) {
            let cX = 3 * (p1.x - p0.x),
                bX = 3 * (p2.x - p1.x) - cX,
                aX = p3.x - p0.x - cX - bX;

            let cY = 3 * (p1.y - p0.y),
                bY = 3 * (p2.y - p1.y) - cY,
                aY = p3.y - p0.y - cY - bY;

            let x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x;
            let y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y;

            return {//  w ww.j  ava  2 s .co m
                x: x,
                y: y
            };
        };

        let accuracy = 0.01, //this'll give the bezier 100 segments
            p0 = {
                x: 10,
                y: 10
            }, //use whatever points you want obviously
            p1 = {
                x: 50,
                y: 100
            },
            p2 = {
                x: 150,
                y: 200
            },
            p3 = {
                x: 200,
                y: 75
            };
        ctx = document.createElement('canvas').getContext('2d');

        ctx.width = 500;
        ctx.height = 500;
        document.body.appendChild(ctx.canvas);

        ctx.moveTo(p0.x, p0.y);
        for (let i = 0; i < 1; i += accuracy) {
            let p = bezier(i, p0, p1, p2, p3);
            ctx.lineTo(p.x, p.y);
        }

        ctx.stroke()
    </script>
</body>

</html>

Related Topic