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>