Part 2: Fabric.js on React — fabric.Rect({…})

April Escobar
3 min readSep 8, 2020

--

(Image Source)

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!

Recap of the end code and results from Part 1:

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>
);
}

Continuing from Part 1: Fabric.js on React — fabric.Canvas(‘…’), we have a basic rendering of a fabric.Canvas instance. Let’s spice things up a bit and add an object on our canvas. We’ll start with a simple rectangle and utilize fabric.Rect({…}).

Part 2: Fabric.js on React — fabric.Rect({…})

new fabric.Rect({...})

Its purpose and uses:

  • A fabric object with properties we can manipulate

Understanding the syntax:

  • Takes in a property object where we can adjust its properties as we please
  • Returns an instance of fabric.Rect
new fabric.Rect({
height: 280,
width: 200,
fill: 'yellow;
})

What we need:

  1. A button element to invoke the rendering of the object
  2. A dynamic function to handle the event

Let’s code it!

Step 1: Create a button that invokes the rendering of the object

<button onClick={addRect}>Rectangle</button>

Step 2: Create a function to handle the event and TEST it!

const addRect = () => console.log('button works!')
  • Upon validation, update the function to be dynamic and have it receive a canvas variable as an argument.
const addRect = canvi => console.log('button works!')
  • Update the button element to reflect the changes accordingly.
<button onClick={() => addRect(canvas)}>Rectangle</button>
  • Inside the function, create a variable that’ll contain the fabric.Rect object. We’ll then add this to our canvas and render to the DOM when invoked.
const addRect = canvi => {
const rect = new fabric.Rect({
height: 280,
width: 200,
fill: 'yellow'
});
canvi.add(rect);
canvi.renderAll();
}

Final Code:

import React, { useState, useEffect } from 'react';
import { fabric } from 'fabric';
const App = () => {
const [canvas, setCanvas] = useState('');
useEffect(() => {
...
}, []);

const initCanvas = () => (
...
);
const addRect = canvi => {
const rect = new fabric.Rect({
height: 280,
width: 200,
fill: 'yellow'
});
canvi.add(rect);
canvi.renderAll();
}
return(
<div>
<h1>Fabric.js on React - fabric.Canvas('...')</h1>
<button onClick={() => addRect(canvas)}>Rectangle</button>
<br/><br/>
<canvas id="canvas" />
</div>
);
}

End Result:

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

Additional methods learned:

canvi.add(...)
  • Adds objects on the attached canvas
  • Takes a fabric instance as an argument
canvi.renderAll()
  • Renders both the upper and lower canvas layers
  • Necessary when making changes to the canvas that needs to be rendered on the DOM

--

--