How to set position relative to top of a canvas circle using Fabric.js ?

Last Updated : 25 Jun, 2024

We will learn how to position a circle relative to the top of a canvas using FabricJS. The canvas allows the circle to be freely moved and resized as needed. Additionally, FabricJS provides extensive customization options for the circle, including initial stroke color, fill color, stroke width, and radius.

Approach:

To achieve this functionality, one can use FabricJS, a powerful JavaScript library for interactive graphics. By importing the library via CDN, we will create a canvas element within the HTML body to host our circle. Subsequently, we will initialize instances of the Canvas and Circle objects provided by FabricJS. Using the top property, we will precisely position the circle relative to the top of the canvas. Finally, we will render the circle on the canvas to visualize the effect.

Syntax:

fabric.Circle({
    radius: number,
    top: number
});

Parameters:

This function accepts two parameters as mentioned above and described below:

radius: It specifies the radius.
top: It specifies the relative distance from the top edge.

Example: To demonstrate positioning a canvas circle relative to top of a canvas using the fiberJs.

html

<!DOCTYPE html>
<html>

<head>
    <title>Dynamic Positioning Using Fabric.js</title>
    <script src=
            "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>

<body>
    <canvas id="canvas" 
            width="600"
            height="200"
            style="border: 1px solid #000000;"></canvas>

    <script>
        // Create a new instance
        //  of Fabric.js Canvas
        var canvas = new fabric
            .Canvas('canvas');

        // Create a circle with 
        // specific radius and initial position
        var circle = new fabric
            .Circle({
                radius: 50,
                fill: 'blue',
                top: 50, // Initial top position
                left: 100 // Initial left position
            });

        // Add the circle to the canvas
        canvas.add(circle);

        // Example of dynamically
        //  changing the top position
        setTimeout(function () {
            circle.set({ top: 100 });
            // Update the top 
            // position dynamically
            canvas.renderAll();
            // Render the canvas 
            // to apply the change
        }, 2000);
        // Delay in milliseconds
    </script>
</body>

</html>