Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Fabric.js Canvas selection Property

  • Last Updated : 30 Jul, 2021

In this article, we are going to see how to enable or disable the selection of objects in a canvas in Fabric.js using the selection property. The canvas in Fabric.js is used as a wrapper over the native canvas object provided by HTML. It provides high-level access to the underlying canvas allowing it to have an object model, allow parsing for SVG files, and allowing the canvas to be interacted with in an intuitive manner.

Approach: To make it possible we are going to use a JavaScript library called Fabric.js. After importing the library, we will create the canvas block in the body tag. After this, we will initialize an instance of the canvas object provided by Fabric.js and set the selection mode needed for the canvas using the selection property.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Syntax:

fabric.Canvas(canvasElement, {
    selection: Boolean
});

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



  • selection: It is a boolean that specifies whether the selection of objects should be enabled or not on the canvas.

Example: The below example illustrates the use of Fabric.js Canvas selection property in JavaScript.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Adding the FabricJS library -->
    <script src=
    </script>
</head>
  
<body>
    <div style="text-align: center;
              width: 500px;">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <b>
            Fabric.js | Canvas selection Property
        </b>
    </div>
  
    <b>Selection Disabled</b>
    <canvas id="canvas" width="500" height="250" 
        style="border:1px solid #000000">
    </canvas>
  
    <b>Selection Enabled</b>
    <canvas id="canvas2" width="500" height="250" 
        style="border:1px solid #000000">
    </canvas>
  
    <script>
  
        let circle = new fabric.Circle({
            radius: 30,
        });
  
        let circle2 = new fabric.Circle({
            radius: 30,
        });
  
        // Initiate a Canvas instance 
        let canvas = new fabric.Canvas("canvas", {
  
            // Disable selection
            // in this Canvas
            selection: false
        });
  
        // Initiate a Canvas instance 
        let canvas2 = new fabric.Canvas("canvas2", {
              
            // Enable selection
            // in this Canvas
            selection: true
        });
  
        canvas.add(circle);
        canvas.centerObject(circle);
        canvas2.add(circle2);
        canvas2.centerObject(circle2);
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :