How can I set up Fabric.js?

Question 1

How can I set up Fabric.js?

html canvas javascript fabricjs

Blue_Dragon360 · Aug 24, 2014 · Viewed 13k times · Source

Answer

Answer

A more modern fabric.js hello-world using webpack (state of 2018)

Advantages of this method

fabric.js does not need to be committed to version control
Given that all dependencies are in package.json only two commands are required to get up and running from scratch with your project: git clone <url> and npm install
Updating to the latest fabric version is as easy as running npm update
Not only the fabricjs code, but also your own code will be minified.
and it gives you all other goodies provided by webpack

Assumptions

This assumes...

... that you have the NPM >= 5.2 (if I recall correctly, this is needed by webpack).
... that you have access to a CLI shell to run the npm and webpack commands.
... that the npm binaries are on your path. By default: $HOME/.local/bin on *nix systems

NOTE: You will not need superuser/root access to the system if you already have npm available.

Preparations

First, initialise a new npm project:

mkdir my-fabric-project
cd my-fabric-project
npm init -y

Then install webpack into that folder (we will need this for later):

npm install webpack webpack-cli --save-dev

Also, install fabricjs as this is our dependency for our project:

npm install --save fabric

The two npm install commands above will populate our package.json file containing production (fabricjs) and development (webpack & webpack-cli) dependencies.

NOTE: When installing webpack, I got errors regarding cairo at the time of this writing. But it seems they are harmless. cairo is a graphics library and I assume this is only needed if you want to run fabricjs in a nodejs process. Browsers are already capable of rendering graphics so when running fabricjs in client-side code this is a non-issue. Otherwise you may need to install required headers. I assume (not tested) that this error can be solved by installing the package libcairo-dev on debian-based systems.

The Code

Now we have everything ready to get coding.

Create two folders src and dist, so our source tree becomes:

.
├── node_modules
|   ├...
|   └── ...
├── dist
├── package-lock.json
├── package.json
└── src

2 directories, 2 files

Create a HTML file index.html inside the dist folder with the following contents:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello World FabricJS</title>
</head>
<body>
  <canvas
    id="myCanvas"
    width="400"
    height="400"
    style="border:1px solid #000000;">
  </canvas>
  <script src="main.js"></script>
</body>
</html>

And also a javascript index.js in the src folder with the following contents:

import {fabric} from 'fabric';

function run() {
  let canvas = new fabric.Canvas('myCanvas');
  let rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 20,
    height: 20
  });
  canvas.add(rect);
}

run();

This will give us the following directory structure:

.
├── node_modules
|   ├...
|   └── ...
├── dist
│   └── index.html
├── package-lock.json
├── package.json
└── src
    └── index.js

2 directories, 5 files

You may notice that dist/index.html references a file called main.js which does not exist. We need to run webpack to create it:

npx webpack

Your code should now work. Either open dist/index.html manually, or run a mini-web server from the console to test:

(cd dist && python3 -m http.server)

That's it!

This should get you started with your project and also allow you to leverage the power of webpack to easily split your code. Good luck & Have fun!

Good To Know

The filenames dist/main.js and src/index.js are the defaults when running webpack without a config
webpack will create minified code in dist/main.js by default. This is because it runs in "production" mode by default. To change this, create a file named webpack.config.js with the following contents:
```
module.exports = {
  mode: 'development'
};
```
You can use it running:
```
npx webpack --config webpack.config.js
```

Question 2

I just started looking into using fabric.js, and I'm finding very little resources on how to install it in my site. All I can find is a single stack overflow question that references the file "all.min.js", which upon a quick search of the unzipped file no longer exists.

I've scoured the internet for the past few hours, and it's looking like it is supposed to be common knowledge! I'm still stuck though.

Which file should I link to in my HTML?

Edit: Just to clarify, I downloaded a large ZIP file off fabric.js's github. I was confused as to which file I should link to to include the library.

How can I set up Fabric.js?

Answer

A more modern fabric.js hello-world using webpack (state of 2018)

Advantages of this method

Assumptions

Preparations

The Code

Good To Know

Related questions