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
FabricJS – How to set a multiplier to scale by in the URL string of a Line object?
In this tutorial, we are going to learn about how to set a multiplier to scale by in the URL string of Line object using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to set a multiplier to scale by in the URL string of Line object we use the multiplier property.
Syntax
toDataURL({ multiplier: Number }: Object): String
Parameters
options (optional) ? This parameter is an Object which provides additional customizations to the URL representation of the Line object. Using this parameter height, quality, format and a lot of other properties can be changed of which
multiplieris a property.
Options Keys
multiplier ? This property accepts a Number value which denotes the multiplier to scale the final Line output image by. The default value is 1.
Without using the multiplier property
Let's see a code example to see the output image when the multiplier property is not used. As soon as we open the console from the dev tools, we can see the URL representation of the Line object. We can copy that URL and paste it into the address bar of a new tab to see the final output. Since we have not used the multiplier property, the default multiplier value will be used, which is 1.
<!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>Without using the multiplier property</h2>
<p>
You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the image.
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
angle: 70,
});
// Add it to the canvas
canvas.add(line);
// Using the toDataURL method
console.log(line.toDataURL());
</script>
</body>
</html>
Using the multiplier property
Let's see a code example to see how the final output image of the Line object looks like when the multiplier property is used. In this case, we passed it a value of 2. Therefore the final image will be scaled by twice in both x and y directions.
<!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>Using the multiplier property</h2>
<p>
You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see the image.
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([200, 100, 100, 40], {
stroke: "blue",
strokeWidth: 20,
angle: 70,
});
// Add it to the canvas
canvas.add(line);
// Using the toDataURL method with multiplier
console.log(line.toDataURL({ multiplier: 2 }));
</script>
</body>
</html>
Key Points
- The
multiplierproperty scales the final exported image dimensions - Higher multiplier values create larger, higher resolution images
- The default multiplier value is 1, which maintains original size
- This property is useful when you need higher quality exports for printing or display
Conclusion
The multiplier property in FabricJS allows you to control the scale of exported Line objects. Use higher values for better quality exports while keeping lower values for smaller file sizes.
536 Views
