search

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

How to create a canvas with background color using FabricJS?

王林
王林forward
2023-09-14 20:09:08696browse

如何使用 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)

Parameters

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

  • 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 tag and assign it an id.

Additionally, we pass that id to the FabricJS API so that it can initialize the FabricJS Canvas instance on the tag. In the second parameter we will pass an object with the key backgroundColor and the color value we want. 

<!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>

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>

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!

html 对象 canvas
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to set the position of an ellipse from the left using FabricJS?Next article：How to set the position of an ellipse from the left using FabricJS?

Related articles

See more