Home > Article > Web Front-end > How to create a canvas with background color using 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.
new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object)
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
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 '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>
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('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>
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!