curved line control fabric.js

by Sahil Kashyap

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabric.js Curved Path with Controls</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>

    <script>
        const canvas = new fabric.Canvas('canvas');

        // Define a quadratic Bezier curve path
        const path = new fabric.Path('M 50 150 Q 150 50 250 150', {
            stroke: 'blue',
            strokeWidth: 3,
            fill: '',
            selectable: true
        });

        // Add path to canvas
        canvas.add(path);

        // Apply control points using createPathControls
        function addPathControls(pathObject) {
            if (fabric.controlsUtils && fabric.controlsUtils.createPathControls) {
                pathObject.controls = fabric.controlsUtils.createPathControls(pathObject);
            } else {
                console.warn("createPathControls function is not found.");
            }
        }

        addPathControls(path);

        // Update control points when the path is modified
        path.on('modified', function () {
            addPathControls(path);
        });

        // Enable dragging and controls
        path.set({ hasControls: true, hasBorders: true });
        canvas.renderAll();
    </script>
</body>
</html>