Fabric.js is a powerful and simple. Javascript HTML5 canvas library. Fabric provides interactive object model on top of canvas element.

1. “Fabric Js –
Javascript HTML5 canvas library”
Presented by “Sreehari K”
“We help build and architect IT solutions”

2. About Cubet
Founded in 2007, Cubet Techno Labs
is an end-to-end SMAC (social,
mobile, analytics and cloud) consulting
company with offices at Kochi, India
and London, UK. With expertise in
insightful product strategy, well-crafted
design and proficient development for
high-end web and mobile application
technologies.
Where we stand
Visit – www.cubettech.com

3. Introduction
Visit – www.cubettech.com
 Javascript library that makes working with
HTML5 canvas
 Create shapes, paths, multi-line text etc.
 Manipulate object’s properties
 Add gradients or filters

4. Visit – www.cubettech.com
Group objects together and manipulate
Add shadow, make it draggable
Fully open-source project
Created on 2008

5. Canvas
Visit – www.cubettech.com
Create absolutely amazing graphics on the web
Syntax
<canvas id="myCanvas" width="200" height="100">
</canvas>

6. Why Fabric?
Visit – www.cubettech.com
Helps to solve problems while using native APIs

7. How?
Visit – www.cubettech.com
Using native API to draw a rectangle
// reference canvas element (with id="myCanvas")
var canvas = document.getElementById('myCanvas');
// get 2d context to draw on (the "bitmap" mentioned earlier)
var ctx = canvas.getContext('2d');
// set fill color of context
ctx.fillStyle = 'red';
// create rectangle at 100, 100 point, with 20x20 dimensions
ctx.fillRect(100, 100, 20, 20);

8. Visit – www.cubettech.com
Using FabricJs to draw a rectangle
// create a wrapper around native canvas element (with
id="'myCanvas'")
var canvas = new fabric.Canvas(''myCanvas'');
// create a rectangle object
var rect = new fabric.Rect({
left: 100, top: 100, fill: 'red', width: 20, height: 20 });
// "add" rectangle onto canvas
canvas.add(rect);

9. Objects
Visit – www.cubettech.com
Fabric covers other basic shapes as well — circles, triangles,
ellipses, and so on
Some basic shapes provided in Fabric:
 fabric.Circle
 fabric.Ellipse
 fabric.Line
 fabric.Polygon
 fabric.Polyline
 fabric.Rect
 fabric.Triangle

10. Example
Visit – www.cubettech.com
var circle = new fabric.Circle({
radius: 20, fill: 'green', left: 100, top: 100
});
canvas.add(circle);
var triangle = new fabric.Triangle({
width: 20, height: 30, fill: 'blue', left: 50, top: 50
});
canvas.add( triangle);

11. Canvas
Visit – www.cubettech.com
• Serves as a wrapper around <canvas> element
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // add object
canvas.item(0); // reference fabric.Rect added earlier (first object)
canvas.getObjects(); // get all objects on canvas (rect will be first and
only)
canvas.remove(rect); // remove previously-added fabric.Rect

12. Text
Visit – www.cubettech.com
• Allows you to add text
fabric.Text
Allow working with text in an object oriented fashion
Provides a much richer functionality than what canvas
gives
 Multiline support
 Text alignment
 Text background
 Text decoration
 Line height

13. Text - Example
Visit – www.cubettech.com
var text = new fabric.Text('hello world', { left: 100, top: 100
});
canvas.add(text);
var underlineText = new fabric.Text("I'm an underlined
text", {
textDecoration: 'underline'
});

14. Free drawing
Visit – www.cubettech.com
isDrawingMode = true/false;
freeDrawingBrush
* freeDrawingBrush.color
* freeDrawingBrush.width

15. Manipulating objects
Visit – www.cubettech.com
Use set method
Change object properties (color, opacity, size, position)
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 100, top: 100, fill: blue, width: 20, height: 20 });
canvas.add(rect);
rect.set('fill', 'red');

16. Interactivity
Visit – www.cubettech.com
Allow users to interact directly with objects on canvas

17. History
Visit – www.cubettech.com
Juriy Zaytsev - Founder
Created Fabric.js in 2008, when starting to
work on his startup — Printio.ru
Started as a foundation for design editor on
printio.ru

18. Supported browsers
Visit – www.cubettech.com
Firefox 2+
Safari 3+
Opera 9.64+
Chrome (all versions)
IE10, IE11, Edge

19. Our Technologies Stack:
Server Side Application JavaScript Frameworks
Mobile App Development
Database System and Cloud
Visit – www.cubettech.com

20. THANKS!
ANY QUESTIONS? PLEASE GET IN TOUCH!
www.cubettech.com
Email : info@cubettech.com
sales@cubettech.com
Skype : cubet.se
Phone: +91 484 405 4324

21. Contact us:
Kemp House
160 City Road
London- EC1V2NX,
UK.info@cubettech.com
+44 2071938618
Carnival Info Park,
Unit IX-C, 9th floor
PhaseIV,
Kochi, Kerala, India
info@cubettech.com
+91 484 4054324