Tutorial Intro

Let's discover FRI in less than 10 minutes.

Getting Started

Get started by creating a new React Project.

What you'll need

• Node.js version 16.14 or above:
  • When installing Node.js, you are recommended to check all checkboxes related to dependencies.
• React.js some version of react with vite or create-react-app or Nextjs you need Create a react project

Add FRI to your project

You need to install Fabricjs-react-improve in your project using npm.

run this command:

npm install --save fabricjs-react-improve

The command also installs all necessary dependencies you need to run FRI.

Add canvas component

You need import this from fabricjs-react-improve

1. FabricJSCanvas : Is our canvas component like <canvas></canvas> in HTML
2. UseFabricJSEditor : Is the main hook of the library you can make a lot of thing with this hook

import { FabricJSCanvas, useFabricJSEditor } from 'fabricjs-react-improve';

also use the hook in your component

function MyCanvas (){
  const {  editor, onReady} = useFabricJSEditor({})
  return (
    <div style={{width: "500px", height: "500px"}}>
     <FabricJSCanvas
      backgroundColor="#000"
      className='my-canvas' 
      onReady={onReady}/>
    </div>
  )
}

• How do I know that the canvas has been added?

you can add a property called backgroundColor this should change the color of the component in this example we use #000 black basically because the default color is white

• why is there a div containing the canvas component?

this was put here for a reason although you can add a classname and use a css file to indicate the size of the canvas it is a better idea to use our ShadowCanvas concept this is nothing more than a div that has an assigned size the canvas reads its size and adapts like water we can also use it to add interactivity with the click but we'll see that later on

• which is being deconstructed inside the useFabricJSEditor inside this hook you have a lot of useful things but here we just remove two things

1. onReady: a boolean property that tells us if the canvas is ready for use, you can use it to create a kind of fallback or loading.

2. editor: is an object with a lot of properties that allows you to add shapes, modify things, etc.

Your first Proyect