How to create a canvas with background image using FabricJS?

In this article, we are going to create a canvas with a background image using FabricJS. There are two ways available in FabricJS, using which we can change the background image of the canvas.

First method is by using the Canvas class itself and passing backgroundImage in the second parameter of the class.
Second method is to use the setBackgroundColor method. Let's see into each of them with an example.

Method 1: Using the Canvas Class

In the first method, we will be using the Canvas class itself by passing the backgroundImage in the second parameter of the class.

Syntax

new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: 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 and backgroundImage is one of them which will help us customize the background image. backgroundImage takes fabric.Image as a value that specifies the background image of the canvas.

Example 1

Check the following example that demonstrates how to create a Canvas with a background image using FabricJS. Since FabricJS works on top of Canvas API, we will create an HTML element using <canvas> tag and give it an id. Further, we will pass that id to the FabricJS API so that it can initialize the FabricJS Canvas instance on the <canvas> tag and in the second argument we will pass an object with a key backgroundImage and the value as the URL of image.

<!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> Creating a Canvas with a Background Image in Fabric.js </h2>
   <canvas id="canvas"> </canvas>
   <script>
      //Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         backgroundImage: "https://www.tutorialspoint.com/tools/images/logo.png",
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Method 2: Using the setBackgroundImage method

We can also use the setBackgroundImage method available from the Canvas class after creating our canvas. Let's look closely into how we can achieve this.

Syntax

canvas.setBackgroundImage(image: fabric.Image | String, callback: function, options: Object)

Parameters

image − This parameter accepts fabric.Image or a String which refers to the url of an image that we want to set the background to.
callback − This parameter takes a callback function which is invoked when the image is loaded and set as background.
options (optional): − This parameter is an object where we can specify options for our background image. We can change the opacity, scale the image up or scale it down, etc.

Example 2

Firstly, we will assign our image URL to a variable and use that as the first parameter. In the second parameter, we will use the renderAll() method to bind the canvas after setting the background image, as given in the code below −

<!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> Creating a Canvas with a Background Image in Fabric.js </h2>
   <p> Here we have used the setBackgroundImage method. </p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      // Image URL
      var imageURL = "https://www.tutorialspoint.com/tools/images/logo.png";
      canvas.setBackgroundImage(imageURL, canvas.renderAll.bind(canvas), {
         backgroundImageOpacity: 1,
         originX: "left",
         originY: "top",
         top: 90,
         left: 70,
         scaleX: 1.1,
         scaleY: 1.1,
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>