FabricJS – How to enable retina scaling in the URL string of a Line object?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn about how to enable retina scaling 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 enable retina scaling in the URL string of Line object we use the enableRetinaScaling property. This will have no impact on the image itself but canvas is scaled by devicePixelRatio for better rendering on retina screens.

Syntax

 toDataURL({ enableRetinaScaling: Boolean }: 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, multiplier and a lot of other properties can be changed of which enableRetinaScaling is a property.

Options Keys

enableRetinaScaling: This property accepts a Boolean value which allows us to enable retina scaling for the image.

Using the enableRetinaScaling property and passing it a false value

Example

Let’s see a code example to see the logged output when using the toDataURL method without using the enableRetinaScaling property. 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 passed the enableRetinaScaling property a false value, retina scaling will not be enabled.


<!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 enableRetinaScaling property and passing it a false value</h2>
   <p>
      You can open console from dev console and see the URL representation with retina scaling disabled
   </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({
         enableRetinaScaling: false
      }));
   </script>
</body>
</html>

Using the enableRetinaScaling property and passing it a true value

Example

Let’s see a code example to see how the Line object looks like when the enableRetinaScaling property has been passed a true value. In this case, retina scaling will be enabled.


<!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 enableRetinaScaling property and passing it a true value</h2>
   <p>
      You can open console from dev console and see the URL representation with retina scaling enabled
   </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({
         enableRetinaScaling: true
      }));
   </script>
</body>
</html>

Rahul Gurung

Updated on: 21-Oct-2022

348 Views

Kickstart Your Career

Get certified by completing the course

Get Started