JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<script src="https://cdn.jsdelivr.net/gh/come/csg2d.js@master/csg2d.js"></script>
<!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');
const { width, height } = canvas;
 // Red Rectangle
    var red = new fabric.Rect({
        width: 80,
        height: 50,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 2
    });

    // Blue Circle (partially overlapping the rectangle)
    var blue = new fabric.Circle({
        radius: 30,
        fill: 'blue',
        stroke: 'black',
        strokeWidth: 2,
        left: 25,
        top: 25
    });

    // Yellow Triangle
    var triangle = new fabric.Triangle({
        width: 50,
        height: 50,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 2,
        left: 40,
        top: -10
    });
  canvas.add(red, blue, triangle);
    // Group the shapes together
    var shapeGroup = new fabric.Group([red, blue, triangle], {
        left: Math.random() * (width - 100),
        top: Math.random() * (height - 100),
        selectable: true
    });

        // 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...