Fabric.js line moveCursor property

Fabric.js Path moveCursor Property

Last Updated : 03 Feb, 2021

In this article, we are going to see how to set the moveCursor of a Path using Fabric.js. The Path in Fabric.js is movable and can be stretched according to requirement. Further, the Path can be customized when it comes to initial stroke color, height, width, fill color, or stroke width.

To make it possible we are going to use a JavaScript library called Fabric.js. After importing the library, we will create a canvas block in the body tag that will contain the path. After this, we will initialize instances of Canvas and Path provided by Fabric.js and set the move cursor value of canvas path using moveCursor property.

Syntax:

fabric.Path('path', {
  moveCursor: String
});

Parameters: This function accepts a single parameter as mentioned above and described below:

moveCursor: It specifies that the cursor value when moving the canvas object.

Below example illustrates the use of Fabric.js Path moveCursor property in JavaScript:

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- FabricJS CDN -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
    </script>
</head>

<body>
    <div style="text-align: center;width: 400px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>

        <b> 
            Fabric.js | Path moveCursor Property 
        </b>
    </div>

    <div style="text-align: center;">
        <canvas id="canvas" width="400" height="200"
            style="border:1px solid green;"> 
        </canvas>
    </div>

    <script>

        // Initiate a Canvas instance 
        var canvas = new fabric.Canvas("canvas");

        var geek = new fabric.Path(
        'M 0 0 L 100 100 L 0 100 z', {
            fill: 'green',
            moveCursor: 'pointer'
        });

        canvas.add(geek);
        canvas.centerObject(geek);
    </script>
</body>

</html>

Output:

Fabric.js line moveCursor property

T

thacker_shahid

Improve

Article Tags :

Similar Reads

Fabric.js Path hoverCursor Property

In this article, we are going to see how to set the hoverCursor of a Path using Fabric.js. The Path in Fabric.js is movable and can be stretched according to requirements. Further, the Path can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make i

Fabric.js Polyline moveCursor Property

In this article, we are going to see how to set the moveCursor property of a canvas Polyline using FabricJS. The canvas Polyline means the Polyline is movable and can be stretched according to requirements. Further, the Polyline can be customized when it comes to initial stroke color, shape, fill co

Fabric.js line moveCursor property

In this article, we are going to set the cursor in a canvas line while moving in FabricJS. The canvas line means the line is movable and can be stretched according to requirements. Further, the line can be customized when it comes to initial stroke color, height, width, fill color, or stroke width.

Fabric.js | Rect moveCursor Property

In this article, we are going to see how to set the moveCursor property of a rectangle canvas using FabricJS. When we move the canvas object then the cursor will be changed. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be c

Fabric.js Image moveCursor Property

Fabric.js is a JavaScript library that is used to work with canvas. The canvas image is one of the class of fabric.js that is used to create image instances. The canvas image means the image is movable and can be stretched according to requirements. In this article we will be using, moveCursor prope

Fabric.js Group moveCursor Property

In this article, we are going to see how to set the moveCursor of a Group of the canvas using Fabric.js. The Group in Fabric.js is movable and can be stretched according to requirements. Further, the Group can be customized when it comes to initial stroke color, height, width, fill color, or stroke

Fabric.js Circle moveCursor Property

In this article, we are going to see how to set the moveCursor property of a canvas Circle using Fabric.js. The Circle in Fabric.js is movable and can be stretched according to the requirement. Further, the Circle can be customized when it comes to initial stroke color, fill color, stroke width, or

Fabric.js Textbox moveCursor Property

In this article, we are going to see how to set the moveCursor property of a Textbox canvas using FabricJS. When we move the canvas object then the cursor will be changed. The canvas Textbox means Textbox is movable and can be stretched according to requirement. Further, the Textbox can be customize

Fabric.js Ellipse moveCursor Property

In this article, we are going to see how to set the moveCursor property of a canvas Ellipse using FabricJS. The canvas Ellipse means the Ellipse is movable and can be stretched according to requirement. Further, the Ellipse can be customized when it comes to initial stroke color, height, width, fill

Fabric.js | Triangle moveCursor Property

In this article, we are going to see how to set the moveCursor property of a canvas triangle using FabricJS. The canvas triangle means the triangle is movable and can be stretched according to requirement. Further, the triangle can be customized when it comes to initial stroke color, height, width,