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

3 min readSep 8, 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!

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:

A button element to invoke the rendering of the object
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>
  );
}