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

FabricJSJavascriptHTML5 Canvas

In this article, we are going to create a canvas with a given background color using FabricJS. The default background color provided by the FabricJS API is white and it can be customized using the second argument.

Syntax

new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: 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 − This parameter is an Object which provides additional customizability to our canvas and backgroundColor is one of them which will help us customize the background color

Example 1

Let's see how to create a Canvas with a background color using FabricJS. Since FabricJS works on top of Canvas API, we will create an HTML element using the <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. In the second argument, we will pass an object with a key backgroundColor and the value as the color we want it to be.

<!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 'cyan' as the background color.</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a Canvas instance and add backgroundColor
      var canvas = new fabric.Canvas('canvas', {
         backgroundColor: 'cyan'
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Example 2

Let's take another example. Here we will create a Canvas with a background color and 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('canvas', {
         backgroundColor: 'cyan'
      });
      // Initiate a Circle instance
      var circle = new fabric.Circle({
         radius: 50,
         fill: "red",
         hoverCursor: 'not-allowed',
      });
      // Render the circle in canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>
raja
Updated on 19-May-2022 08:18:07

Advertisements