How to create a canvas with background color using FabricJS?-JS Tutorial-php.cn

How to create a canvas with background color using FabricJS?

王林

Release： 2023-09-14 20:09:08

forward

636 people have browsed it

如何使用 FabricJS 创建具有背景颜色的画布？

In this article, we will create a canvas with a given background color using FabricJS. The default background color provided by the FabricJS API is white, which can be customized using the second parameter.

Syntax

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

Copy after login

Parameters

Element - This parameter is
Options - This parameter is an object that provides additional customizability to our canvas and backgroundColor is one of them, it will help us customize the background color

Example 1

Let us see how to create a canvas with background color using FabricJS. Since FabricJS works on top of the Canvas API, we will create an HTML element using the

Additionally, we pass that id to the FabricJS API so that it can initialize the FabricJS Canvas instance on the

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the FabricJS library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
   </script>
</head>
<body>
   <h2>How to create a canvas with a background color using FabricJS</h2>
   <p>Here we have used &#39;cyan&#39; as the background color.</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a Canvas instance and add backgroundColor
      var canvas = new fabric.Canvas(&#39;canvas&#39;, {
         backgroundColor: &#39;cyan&#39;
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Copy after login

Example 2

Let’s give another example. Here we will create a canvas with a background color and create a Circle object on the canvas.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the FabricJS library -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
   </script>
</head>
<body>
   <h2>How to create a canvas with a background color using FabricJS</h2>
   <p>Here we have created a canvas with a background color and a circle object on the canvas</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a Canvas instance and add backgroundColor
      var canvas = new fabric.Canvas(&#39;canvas&#39;, {
         backgroundColor: &#39;cyan&#39;
      });
      // Initiate a Circle instance
      var circle = new fabric.Circle({
         radius: 50,
         fill: "red",
         hoverCursor: &#39;not-allowed&#39;,
      });
      // Render the circle in canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Copy after login

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