Open In App

Fabric.js Polygon perPixelTargetFind Property

Last Updated : 20 Jan, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to see the perPixelTargetFind property of a polygon canvas using FabricJS. The canvas polygon means the polygon is movable and can be stretched according to requirements. Further, the polygon 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 FabricJS. After importing the library, we will create a canvas block in the body tag that will contain the polygon. After this, we will initialize instances of Canvas and polygon provided by FabricJS and set the perPixelTargetFind of canvas polygon using perPixelTargetFind property, and render the polygon on the Canvas as given in the below example.

Syntax:

fabric.Polygon([
    { x: pixel, y: pixel },
    { x: pixel, y: pixel },
    { x: pixel, y: pixel},
    { x: pixel, y: pixel},
    { x: pixel, y: pixel }
],
{
    perPixelTargetFind: Boolean
});

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

  • perPixelTargetFind: When set to `true`, objects are “found” on canvas on a per-pixel basis rather than according to the bounding box.

Below examples illustrate the Fabric.JS Polygon perPixelTargetFind in JavaScript:

Example:

HTML




<!DOCTYPE html> 
<html
  
<head
  <!-- Loading the FabricJS library -->
  <script src
  </script
</head
  
<body
  <div style="text-align: center;width: 600px;"
    <h1 style="color: green;"
        GeeksforGeeks 
    </h1
    <b
        Fabric.js | Polygon perPixelTargetFind Property 
    </b
  </div
  <canvas id="canvas" width="600" height="200"
      style="border:1px solid #000000;"
  </canvas
  
  <script
    // Initiate a Canvas instance 
    var canvas = new fabric.Canvas("canvas"); 
  
    // Initiate a polygon instance 
    var polygon = new fabric.Polygon([ 
        { x: 295, y: 10 }, 
        { x: 235, y: 198 }, 
        { x: 385, y: 78 }, 
        { x: 205, y: 78 }, 
        { x: 355, y: 198 }], {
            fill:'green',
            stroke: 'blue',
         paintFirst: 'fill',
         perPixelTargetFind: 'true'
  
    }); 
  
    // Render the polygon in canvas 
    canvas.add(polygon); 
  </script
</body
  
</html>


Output:



Similar Reads

Fabric.js Textbox perPixelTargetFind Property
In this article, we are going to see how to set the value of perPixelTargetFind property of a canvas textbox using FabricJS. The canvas textbox means textbox is movable and can be stretched according to requirement. Further, the textbox can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make it p
2 min read
Fabric.js Polyline perPixelTargetFind Property
In this article, we are going to see the perPixelTargetFind property of a Polyline canvas using FabricJS. The canvas polyline is movable and can be stretched according to requirements. Further, the polyline 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
2 min read
Fabric.js Path perPixelTargetFind Property
In this article, we are going to see how to set the perPixelTargetFind 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. Approach: To make it possible we are going to use a J
2 min read
Fabric.js Circle perPixelTargetFind Property
In this article, we are going to see how to set the value of perPixelTargetFind property of a canvas circle using FabricJS. The canvas circle means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. Approach: To
2 min read
Fabric.js Group perPixelTargetFind Property
In this article, we are going to see how to set the perPixelTargetFind 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 width. To make it possible we are going to
2 min read
Fabric.js Itext perPixelTargetFind Property
Fabric.js is a JavaScript library that is used to work with canvas. The canvas Itext is one of the class of Fabric.js that is used to create Itext instances. The canvas Itext means the Itext is movable and can be stretched according to requirement. In this article we will be using perPixelTargetFind property. First import the Fabric.js library. Aft
2 min read
Fabric.js ActiveSelection perPixelTargetFind Property
Fabric.js is a JavaScript library that is used to work with canvas. The canvas ActiveSelection is one of the classes of fabric.js that is used to create ActiveSelection instances. The canvas ActiveSelection means the ActiveSelection is movable and can be stretched according to requirement. In this article, we will be using perPixelTargetFind proper
2 min read
Fabric.js Polygon minScaleLimit Property
In this article, we are going to see how to set the minimum scale limit of a canvas polygon using FabricJS so that the size of the polygon cannot be scaled-down than that limit. The canvas polygon means the polygon is movable and can be stretched according to requirement. Further, the polygon can be customized when it comes to initial stroke color,
2 min read
Fabric.js Polygon fill Property
In this article, we are going to see how to set the fill color of the canvas polygon using FabricJS. The canvas polygon means the polygon is movable and can be stretched according to requirement. Further, the polygon can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make it possible we are going
3 min read
Fabric.js Polygon borderScaleFactor Property
In this article, we are going to see how to enable the border scaling of the canvas Polygon using FabricJS. The canvas polygon means the polygon is movable and can be stretched according to requirement. Further, the polygon can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make this possible we
3 min read