How to use fabric js (html5-Canvas Library) custom build in ionic project

Question

I am working in ionic application that enable to create graphics. I am using fabric js letest version 3.2.0 and want ot use touch gesture.

I try to clone fabric js repository into my pc and try to build custom build using following command :

  node build.js modules=ALL

So, build is successful in dist folder, but I don't know how to install it in ionic.

Please help me.

Answer 1

After compare all file in node-module/fabric and my custom build. and I got that both are same. So I put this answer for help.

Step :

1. install letest fabric js using cmd : npm install fabric --save

2. download custom build from fabric js site : http://fabricjs.com/build/

3. open : ionic-project-folder/node modules/fabric/

4. replace dist folder Placed inside above path with downloaded custom build (dist folder)

5. re-serve project.

If any other solution is possible (like publishing into npm and install) then Please mention.

Answer 2

install via npm

npm i fabric

more details go to

https://www.npmjs.com/package/fabric

Answer 3

This is a link to Ionic's API for interacting with the Crashlytics kit: https://ionicframework.com/docs/v3/native/crashlytics/. This should have the instructions needed to get your Ionic app integrated with Crashlytics.

Answer 4

For my case, I'm using a custom build fabric js version 5.2.4 with an Ionic 6 application.

1. Uninstall fabric js if you are installed it in your project with npm uninstall fabric
2. Download your custom build from fabric js site : http://fabricjs.com/build/
3. Add the downloaded file to public directory. For example public/libs/fabric/fabric.min.js
4. At App.js

useEffect(() => {
        const script = document.createElement('script');
        // You may have to replace this code with your path.
        script.src = "libs/fabric/fabric.min.js";
        script.async = true;
        document.body.appendChild(script);
        return () => {
            document.body.removeChild(script);
        }
    }, []);

5. re-serve project.
6. Now fabric should be available from window.fabric

Note.

The editor also add some code to my tsconfig.json

  "include": [
    "src",
    "public/libs" // This code
  ]

I do not know what it does but it works fine so I leave it.