Part 2: Fabric.js on React — fabric.Rect({…})
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>
);
}
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