Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to customize the viewport of the canvas using FabricJS?
In this article, we are going to learn how to customize the viewport of the canvas using FabricJS. Viewport is the area which is visible to user on the canvas. We can customize the viewport by using the viewportTransform property which allows us to control the transformation of the viewport
Syntax
new fabric.Canvas(element: HTMLElement|String, { viewportTransform: Array }: 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, properties such as color, cursor, border width, and a lot of other properties can be changed related to the canvas, of which viewportTransform is a property. It accepts an Array of 6 values which determines the transformation on the plane. It's default value is canvas.viewportTransform = [1, 0, 0, 1, 0, 0].
Example 1
Passing the viewportTransform property as key to the class
Let's see a code example of how we can customize the viewport of our canvas. In this example, we have used the values [0.7, 0.1, 0.5, 0.9, 20, 50] that signify scaleX, skewY, skewX, scaleY, translation, and translationY, respectively.
<!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>Customizing the viewport of the canvas using FabricJS </h2>
<p>Select an area around the object to see the viewports.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
viewportTransform: [0.7, 0.1, 0.5, 0.9, 20, 50]
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "red",
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Example 2
Passing the viewportTransform property as a key with custom values to scale down object
Let us see another code example where we will be displaying a transformation that scales by 80% and translates towards the bottom-right without skewing.
<!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>Customizing the viewport of the canvas using FabricJS </h2>
<p>Select an area around the object to see the viewports.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
viewportTransform: [0.8, 0, 0, 0.8, 50, 50]
});
// Creating an instance of the fabric.Rect class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "red"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
1K+ Views
