search

Home >Web Front-end >JS Tutorial >How to create canvas using FabricJS?

How to create canvas using FabricJS?

王林
王林forward
2023-08-22 22:01:02806browse

How to create canvas using FabricJS?

In this article, we will create a canvas using FabricJS, but before that, let us understand what is canvas. For drawing graphics on web pages, we have a Web API called Canvas API. This API is fine for drawing basic shapes, but it becomes very difficult to add interactions or draw complex shapes. Hence, FabricJS emerged, a library built on top of the Canvas API. To use FabricJS, the first thing you need to do is create a FabricJS canvas.

Syntax

new fabric.Canvas(element: HTMLElement|String, options: Object)

Parameters

  • element − This parameter isThe element itself can be obtained using document.getElementById() or the id of the element itself. The FabricJS canvas will be initialized on this element.

  • options (optional) − This parameter is an object that provides additional customization of the canvas. Using this parameter we can change different properties of the canvas like color, cursor, border width, etc.

Example 1

Passing the id as a string

Let’s look at a code example of creating a canvas 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. We then pass that id to the FabricJS API so that it can initialize the FabricJS Canvas instance on the tag. 

<!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 using FabricJS</h2>
   <p>Select an area inside the canvas and you will get a highlighted section.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a Canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Example 2

Passing the element as HTMLElement

We can get the element using document.getElementById() while Instead of passing the id directly to the FabricJS API, then pass that element to the FabricJS API like this −

<!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 using FabricJS</h2>
   <p>Select an area inside the canvas and you will get a highlighted section.</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a Canvas instance
      var element = document.getElementById(&#39;canvas&#39;);
      var canvas = new fabric.Canvas(element);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

The above is the detailed content of How to create canvas 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 compare two JavaScript array objects using jQuery/JavaScript?Next article：How to compare two JavaScript array objects using jQuery/JavaScript?

Related articles

See more