1. Interactive
Web With
Fabric.js
by @kangax
Saturday, October 19, 13

2. Saturday, October 19, 13

3. Duck
swim()
quack()
WildDuck
swim()
quack()
fly()
ScroogeMcDuck
swim()
quack()
moneyDive()
RubberDuck
swim()
quack()
toy: true
Saturday, October 19, 13

4. printio.ru
Saturday, October 19, 13

5. HTML5 Canvas
interface CanvasPathMethods {
...
void closePath(...);
void moveTo(...);
void lineTo(...);
void quadraticCurveTo(...);
void bezierCurveTo(...);
void arcTo(...);
void rect(...);
void arc(...);
void ellipse(...);
...
};
Saturday, October 19, 13

6. Fabric.js
HTML5 Canvas Library
Interactive object model
on top of <canvas> element
Saturday, October 19, 13

7. Fabric vs canvas
var canvasEl = document.getElementById(‘c’);
var ctx = canvasEl.getContext(‘2d’);
ctx.fillStyle = ‘red’;
ctx.fillRect(10, 10, 100, 100);
var canvas = new fabric.Canvas(‘c’);
var rect = new fabric.Rect({
left: 10,
top: 10,
fill: ‘red’,
width: 100,
height: 100
});
canvas.add(rect);
Saturday, October 19, 13

8. Fabric vs canvas
var canvasEl = document.getElementById(‘c’);
var ctx = canvasEl.getContext(‘2d’);
ctx.fillStyle = ‘red’;
ctx.save();
ctx.translate(10, 10);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillRect(-10, -10, 100, 100);
ctx.restore();
var canvas = new fabric.Canvas(‘c’);
var rect = new fabric.Rect({
left: 10,
top: 10,
fill: ‘red’,
width: 100,
height: 100,
angle: 45
});
canvas.add(rect);
Saturday, October 19, 13

9. Fabric vs canvas
ctx.clearRect(0, 0,
ctx.canvas.width, ctx.canvas.height);
ctx.fillRect(20, 50, 20, 20);
rect.set({
left: 20,
top: 50
});
canvas.renderAll();
Saturday, October 19, 13

10. Fabric vs canvas
ctx.beginPath();
ctx.moveTo(20, 10);
ctx.lineTo(80, 10);
ctx.quadraticCurveTo(90,
ctx.lineTo(90, 80);
ctx.quadraticCurveTo(90,
ctx.lineTo(20, 90);
ctx.quadraticCurveTo(10,
ctx.lineTo(10, 20);
ctx.quadraticCurveTo(10,
ctx.fill();
10, 90, 20);
90, 80, 90);
90, 10, 80);
10, 20, 10);
var rect = new fabric.Rect({
left: 10,
top: 10,
width: 80,
height: 80,
rx: 10,
ry: 10
});
Saturday, October 19, 13

11. fabric.Image
OOP
fabric.Text
fabric.PathGroup
Saturday, October 19, 13

12. fabric.Image
render()
OOP
fabric.Text
render()
fabric.PathGroup
render()
Saturday, October 19, 13

13. fabric.Image
render()
toSVG()
toJSON()
OOP
fabric.Text
render()
toSVG()
toJSON()
fabric.PathGroup
render()
toSVG()
toJSON()
Saturday, October 19, 13

14. OOP
fabric.Canvas
fabric.Object
has
fabric.Line
fabric.Circle
fabric.Triangle
fabric.Ellipse
fabric.Rect
fabric.Polyline
fabric.Polygon
fabric.Group
fabric.Text
fabric.Image
fabric.Path
is
has
mixin
is
Saturday, October 19, 13
fabric.PathGroup
fabric.Color
fabric.Gradient
fabric.Pattern
fabric.Shadow
fabric.Observable
fabric.Collection

15. Features Demo
Saturday, October 19, 13

16. Goals
Simple, Intuitive
fabric.Image.fromURL('...', function(img) {
img.scale(0.5).set({
left: 250,
top: 250,
angle: -15,
clipTo: function (ctx) { ... }
});
canvas.add(img).setActiveObject(img);
});
Saturday, October 19, 13

17. Goals
Simple, Intuitive
Modular
~50 small classes/modules
Custom build: 77-204KB
Flexible architecture: image filters, brushes
Saturday, October 19, 13

18. Goals
Simple, Intuitive
Modular
Encapsulated
Plays well with other libraries
Everything is under 1 object — fabric
No non-standard host object additions
Saturday, October 19, 13

19. Goals
Simple, Intuitive
Modular
Encapsulated
Tests, tests, tests
Saturday, October 19, 13
fabricjs.com/test
2000+

20. Goals
Simple, Intuitive
Modular
Encapsulated
Tests, tests, tests
Cross-browser
Saturday, October 19, 13
Native
Firefox 2+
Safari 3+
Opera 9.64+
Chrome (all)
IE9, IE10, IE11
Excanvas
IE6,7,8

21. Goals
Simple, Intuitive
Fabric.js
Node.js
Modular
node-canvas
Encapsulated
cairo
Tests, tests, tests
Cross-browser
Server-side rendering
Saturday, October 19, 13

22. Key features
Built-in Interaction
SVG parsing
Free Drawing
Image Filters
Animation
Events
Saturday, October 19, 13

23. On a Roadmap
Curved text
Multiple layers
for performance
Saturday, October 19, 13
Interactive Text
Canvas
zooming
WebGL renderer

24. Other libraries
Saturday, October 19, 13

25. Other libraries
SVG parsing
but no object model
Closest
functionality
Sophisticated
curves handling
Not JS
Recent additions
Mostly unpopular
or inactive
Saturday, October 19, 13

26. Built with Fabric
Infographics designer
Saturday, October 19, 13
Soccer formation board

27. Built with Fabric
Tutoring Whiteboard
Saturday, October 19, 13
Arcade Volleyball

28. Open Source Power
50+ contributors on Github
900+ tickets on Github (800+ closed)
1500+ commits (only 999 commits by me)
2300+ stars on Github
1200+ threads on GoogleGroup
400+ fabric questions on StackOverflow
Saturday, October 19, 13

29. Help welcome
Translating tutorials
New demos
Fixing bugs
fabricjs.com design
Finding SVG failures
Improvings docs
Spreading the love
Saturday, October 19, 13

30. Keep in touch
fabricjs.com
github.com/kangax/fabric.js
twitter.com/fabricjs
Saturday, October 19, 13

31. Thanks!
Questions?
@kangax
Saturday, October 19, 13