Blog

What is Fabric.js

Fabric.js is a very powerful and simple JavaScript HTML5 canvas library.

Fabric provides an interactive object model on to of canvas element.

Fabric also has a capability to convert the canvas SVG to canvas and canvas to SVG.

 

What should you do with Fabric.js

Using Fabric.js you can create a populated object on canvas like a simple geometrical shape or complex shapes.

You can upload an image on canvas and perform manipulation on an image like re-size image, rotate

image, apply image filters, etc.

You can add text on the canvas and perform formatting of text, like add font color. Add a text background color, change the font of the text, change the size of the font, etc.

Fabric.js have built-in animation you can easily apply any object of the canvas.

Fabric.js provides a free drawing to create anything you like.

You can save canvas as a png, jpg, SVG and JSON format.

 

How you can integrate fabric.js into rails application

There is two way to integrate fabric.js into rails application.

1. With the help of ‘fabric-rails’ Gem

2. With the help of Fabric.Js CDN.

 

With the help of ‘fabric-rails’ Gem

You can easily use fabric.js in rails with the help of ‘fabric-rails’ gem.

gem ‘fabric-rails

 

With the help of Fabric.Js CDN.

You can add lates version of CDN in your Ruby on Rails application and use fabric.js.

<%=javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.1.0/fabric.min.js" %>

 

Create Fabric.js canvas in rails application.

1. Create Rails application

rails new fabric_js_demo_app

2. Add the fabric-rails gem to your Gemfile.

gem ‘fabric-rails

and run bundle install

3. Add fabric.js to your a/assets/javascript/application.js

//= require fabric

4. Create a controller with the index method

rails generate controller home index

5. Add root path for the index method.

 

 

6. Add canvas div in app/views/home/index.html.erb file

 

 

7. Add the script in .js file to make canvas div as a fabric canvas

 

8. Now you run rails server and you can show on fabric canvas is display with text.

 

9. If you want to your canvas object is not move outside the canvas then add the following script.

 

 

10. If you want to add a test on canvas then used following script.

 

HTML Code

JS Script.

 

11. If you want to upload an image on the canvas. So used the following code.

 

HTML Code.

 

JS Script.

 

12. If you want to convert your canvas into free drawing mode then use the following code.

 

HTML Code.

 

JS Script.

 

13. If you want to convert canvas into an image and download it.

 

HTML Code.

 

JS Script.

 

14. If you want to delete selected object from the canvas.

 

HTML Code.

 

JS Script.

You can try fabric.js in your rails application for any application that has a requirement wherein user needs to print any text or image on other objects.

 

Best of luck.