Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to enable centered scaling on a canvas using FabricJS?
In this article, we are going to learn how to enable centered scaling on a canvas using FabricJS. In FabricJS, an object gets transformed proportionally when dragged from the corners. We can use the centeredScaling property to use the center as the origin of transformation.
Syntax
new fabric.Canvas(element: HTMLElement|String, {
centeredScaling: Boolean
}: Object)
Parameters
-
element ? This parameter is the <canvas> element itself which can be derived using Document.getElementById() or the id of the <canvas> element itself. The FabricJS canvas will be initialized on this element.
-
options (optional) ? This parameter is an Object which provides additional customizations to our canvas. Using this parameter color, cursor, border width and a lot of other properties can be changed related to the canvas, of which centeredScaling is a property. It accepts a Boolean value which determines if the object should use the center point as the origin of transformation or not. Its default value is false.
Example 1: centeredScaling Set to False (Default)
Let's see a code example of how an object gets scaled when centeredScaling is set to false. The object will scale from the opposite corner when you drag a corner handle.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Centered Scaling Disabled in FabricJS</h2>
<p>Select the object and resize it by its corners. The object will scale from the opposite corner.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
centeredScaling: false
});
// Creating an instance of the fabric.Circle class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(600);
canvas.setHeight(300);
</script>
</body>
</html>
Example 2: centeredScaling Set to True
By default, the centeredScaling property is set to false. When we set it to true, objects will scale from their center point, maintaining their position while resizing.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Centered Scaling Enabled in FabricJS</h2>
<p>Here we have set <b>centeredScaling</b> to true. Select the object and resize it by its corners. The object will scale uniformly from its center.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
centeredScaling: true
});
// Creating an instance of the fabric.Circle class
var circle = new fabric.Circle({
left: 200,
top: 100,
radius: 40,
fill: "blue",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(600);
canvas.setHeight(300);
</script>
</body>
</html>
Behavior Comparison
| centeredScaling Value | Scaling Origin | Object Position |
|---|---|---|
false (default) |
Opposite corner | Changes during scaling |
true |
Center point | Remains fixed |
Key Points
- The centeredScaling property is a canvas-level setting that affects all objects on the canvas
- When set to true, objects scale from their center point, keeping their position fixed
- When false (default), objects scale from the opposite corner of the handle being dragged
- This property provides better user experience for certain design applications
Conclusion
The centeredScaling property in FabricJS allows you to control how objects scale on the canvas. Setting it to true provides more intuitive scaling behavior where objects grow or shrink from their center, maintaining their position.
1K+ Views
