Skip to content
Related Articles

Related Articles

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.


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.


<!DOCTYPE html>
    <!-- Adding the FabricJS library -->
    <script src=
    <div style="text-align: center;
              width: 500px;">
        <h1 style="color: green;">
            Fabric.js | Canvas selection Property
    <b>Selection Disabled</b>
    <canvas id="canvas" width="500" height="250" 
        style="border:1px solid #000000">
    <b>Selection Enabled</b>
    <canvas id="canvas2" width="500" height="250" 
        style="border:1px solid #000000">
        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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!