In this article, we are going to see how to set the minimum scale limit of a canvas Image using FabricJS so that the size of the image cannot be scaled-down than that limit. The canvas Image means the Image is movable and can be stretched according to requirements. Further, the Image can be customized when it comes to initial stroke color, shape, 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 Image. After this, we will initialize instances of Canvas and Image provided by FabricJS and set the minimum scale limit of the Image using minScaleLimit property, and render the Image on the Canvas as given in the below example.
Syntax:
fabric.Image(image, {
minScaleLimit : number
});
Parameters: This function takes a single parameter as mentioned above and described below.
- minScaleLimit : This parameter takes a number value that specifies the minimum scale limit.
Example: This example uses Fabric.js to set the minScaleLimit property of the canvas image as shown in the below example.
HTML
<!DOCTYPE html> <html> <head> <!-- Adding the FabricJS library --> <script src= </script> </head> <body> <h1 style="color: green;"> neveropen </h1> <b> Fabric.js | Image minScaleLimit Property </b> <canvas id="canvas" width="400" height="300" style="border:2px solid #000000"> </canvas> <img src= width="100" height="100" id="my-image" style="display: none;"> <br> <script> // Creating the instance of canvas object var canvas = new fabric.Canvas("canvas"); // Getting the image var img = document.getElementById('my-image'); // Creating the image instance var neveropen = new fabric.Image(img, { minScaleLimit : 1.2 }); canvas.add(neveropen); canvas.centerObject(neveropen); </script> </body> </html> |
Output:
