Fabric.js in Ruby On Rails - ROR blogs
What is Fabric.js
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.
With the help of Fabric.Js CDN.
You can add lates version of CDN in your Ruby on Rails application and use fabric.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.
and run bundle install
//= 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.
11. If you want to upload an image on the canvas. So used the following code.
12. If you want to convert your canvas into free drawing mode then use the following code.
13. If you want to convert canvas into an image and download it.
14. If you want to delete selected object from the canvas.
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.