Part 1: Fabric.js on React - fabric.Canvas(‘…’)

3 min readSep 1, 2020

Introduction:

Hello there 🙋‍♀️

Welcome to my personal notes on learning the Fabric.js library on React. We’ll be taking in bite-size information to digest everything we learn.

In every bite-size read, we’ll cover syntax, go over what we need, do some sample coding, and finally view the end result.

(We’re going to assume we have a basic understanding of React.)

I’m a huge fan of ES6 syntax and hooks, so we’ll be utilizing those throughout our learning experience.

Feel free to correct me in anything I write as, again, these are my personal notes I’m publishing to the world~

Cheers!

Part 1: Fabric.js on React — fabric.Canvas(‘…’)

new fabric.Canvas('...')

Before we start playing around with the wonderful tools Fabric.js provides for us, we first need to define a space where we can work on. Thus, learning fabric.Canvas first.

(We’re also going to assume that the Fabric.js packaged was already installed and imported on our application.)

Its purpose and uses:

Serves as a wrapper around <canvas> element
Responsible for managing all fabric objects on that particular canvas
Serves as a configuration host with options we can specify/manipulate

Understanding the syntax:

Takes in two parameters, an id of an element and a property object
Returns an instance of fabric.Canvas

new fabric.Canvas('elementId', {
   height: 800,
   width: 800,
   backgroundColor: 'pink'
}

What we need:

A canvas element with an id
A state variable to store and access the fabric.Canvas object
A function that returns the fabric.Canvas object
A lifecycle that invokes the function upon initial rendering of the DOM

Let’s code it!

Step 1: Create a canvas element with an id

<canvas id="canvas"/>

Step 2: Define a state variable to store and access the fabric.Canvas object

import React, { useState } from 'react';const [canvas, setCanvas] = useState('');

Step 3: Create a function that returns a fabric.Canvas object

const initCanvas = () => (
   new fabric.Canvas('canvas', {
      height: 800,
      width: 800,
      backgroundColor: 'pink'
   })
);

Step 4: Invoke the function upon initial rendering of the DOM

import React, { useState, useEffect } from 'react';useEffect(() => {
   setCanvas(initCanvas());
}, []);

Final Code:

import React, { useState, useEffect } from 'react';
import { fabric } from 'fabric';const App = () => {
  const [canvas, setCanvas] = useState('');  useEffect(() => {
    setCanvas(initCanvas());
  }, []);  const initCanvas = () => (
    new fabric.Canvas('canvas', {
      height: 800,
      width: 800,
      backgroundColor: 'pink'
    })
  )  return(
    <div>
      <h1>Fabric.js on React - fabric.Canvas('...')</h1>
      <canvas id="canvas" />
    </div>
  );
}

End Result:

If all goes well, we should see the following in our browser:

Things to keep in mind:

When inspecting the canvas, it’s important to note that there are two layers that exist — the upper and lower canvas.

The lower canvas contains the id we defined in addition to having the class of “lower-canvas” while the upper canvas only has the class of “upper-canvas”.

The upper canvas is utilized by the Fabric.js API for handling events, groupings, etc. while we’re actually working on the lower canvas layer.

Just a side note 🙂