search

Home >Web Front-end >JS Tutorial >How to create a canvas with a background image using FabricJS?

How to create a canvas with a background image using FabricJS?

王林
王林forward
2023-09-23 11:29:041165browse

如何使用 FabricJS 创建带有背景图像的画布？

In this article, we will create a canvas with a background image using FabricJS. There are two methods in FabricJS to change the background image of the canvas.

  • The first way is to use the Canvas class itself and pass backgroundImage.

  • The second method is to use the setBackgroundColor method. Let's understand them through an example.

Method 1: Using the Canvas class

In the first method, we will use the Canvas class itself by passing it in the second parameter of the classbackgroundImage.

Syntax

new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object)

Parameters

  • Element - This parameter is em> The element itself can be derived from the id of the element itself using document.getElementById() or . The FabricJS canvas will be initialized on this element.

  • Options (optional) - This parameter is an object that provides additional customization of the canvas, backgroundImage is one of them, it will help us customize the background image. backgroundImageUse fabric.Image as the value of the specified canvas background image.

Example 1

Check out the following example that demonstrates how to create a Canvas with a background image using FabricJS. Since FabricJS works on top of the Canvas API, we will create an HTML element using the tag and give it an id. Additionally, we will pass that id to the FabricJS API so that it can initialize the FabricJS Canvas instance on the tag, and in the second parameter we will pass an object with the key backgroundImage and its value as the URL of the 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: Use the setBackgroundImage method

We can also use the setBackgroundImage method provided in the Canvas class after creating the canvas. Let's take a closer look at how to achieve this.

Syntax

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

Parameters

  • image - This parameter accepts fabric.Image or referenced String The URL of the image we want to set the background to.

  • callback - This parameter takes a callback function that is called when the image is loaded and set as the background.

  • Options (optional): - This parameter is the object in which we can specify the background image options. We can change the opacity, enlarge or reduce the image, etc.

Example 2

First, we assign the image URL to a variable and use it as the first parameter. In the second parameter we will bind the canvas using renderAll() method after setting the background image as shown 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>

The above is the detailed content of How to create a canvas with a background image using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

html 回调函数 字符串 对象 canvas fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Fabric.js – How to draw a hexagonal grid (honeycomb) using the Polygon classNext article：Fabric.js – How to draw a hexagonal grid (honeycomb) using the Polygon class

Related articles

See more