Fabric.js @ Falsy Values

Presentation on Fabric.js at Falsy Values, Warsaw, 2011

1. fabric.js
Building a canvas library
Warsaw 2011

2. who is kangax?
kangax.com

3. Common Feature Tests
perfectionkills.com ES5 compat tables
HTML minifier
PrototypeJS
DOMLint
fabric.js
who is kangax?

4. History
Why fabric?
How it works. Features.
Canvas libraries
Future plans
Game Plan

5. History
printio.ru

6. History
printio.ru
All Javascript, no Flash
Free drawing
Vectors & images
Performance

7. Canvas vs SVG

8. Why fabric?
There was an excruciating need for
interactive object model
for canvas elementCanvas API sucks is too low level

9. Why fabric?
var canvas = new fabric.Element('canvas');
var rect = new fabric.Rect({
top: 100,
left: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
var canvasEl = document.getElementById('canvas');
var ctx = canvasEl.getContext('2d');
ctx.strokeStyle = '';
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 20, 20); native fabric

10. Why fabric?
var canvas = new fabric.Element('canvas');
var rect = new fabric.Rect({
top: 100,
left: 100,
fill: 'red',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
var canvasEl = document.getElementById('canvas');
var ctx = canvasEl.getContext('2d');
ctx.strokeStyle = '';
ctx.fillStyle = 'red';
ctx.save();
ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillRect(-10, -10, 20, 20);
ctx.restore();native fabric

11. Why fabric?
rect.set(‘left’, 20).set(‘top’, 50);
canvas.renderAll();
ctx.fillRect(20, 50, 20, 20); native fabric

12. Why fabric?
rect.set(‘left’, 20).set(‘top’, 50);
canvas.renderAll();
ctx.fillRect(20, 50, 20, 20);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillRect(20, 50, 20, 20); native fabric

13. Demo
http://kangax.github.com/fabric.js/test/demo

14. Under the hood
Upper <canvas>
Lower <canvas>
Group selection
All objects

15. Under the hood
fabric.Triangle
fabric.Circle
fabric.Rect
fabric.Element
render()
render()
render()
renderAll()

16. Under the hood
fabric.Triangle
fabric.Circle
fabric.Rect
fabric.Elementrender() render() renderAll() render()

17. Under the hood
fabric.Element
fabric.Object
fabric.Line
fabric.Circle
fabric.Triangle
fabric.Ellipse
fabric.Rect
fabric.Polyline
fabric.Polygon
fabric.Group
fabric.Text
fabric.Image
fabric.PathRoot “class”. 2D objects Container Concrete “subclasses”
fabric.Color
fabric.Point
fabric.Intersection

18. Under the hood
fabric.ObjectRoot “class”. 2D objects
clone
cloneAsImage
complexity
get
getCenter
getWidth
getElement
getHeight
intersectsWithObject
isActive
isType
scale
scaleToHeight
scaleToWidth
set
setActive
setElement
straighten
toDataURL
toJSON
toGrayscale
...Inherited by all subclasses

19. Features — Animation
fabric.util.animate fxCenterObjectV: function (...) {
...
fabric.util.animate({
startValue: object.get('top'),
endValue: this.getCenter().top,
duration: this.FX_DURATION,
onChange: function(value) {
object.set('top', value);
_this.renderAll();
onChange();
},
onComplete: function() {
object.setCoords();
onComplete();
}
});

...
}
fxCenterObjectV
fxCenterObjectH
fxStraightenObject
fxRemove
...

20. Features — Animation
Or just use new, fancy window.requestAnimationFrame
(function animate() {
canvas.forEachObject(function(obj) {
obj.left += (obj.movingLeft ? -1 : 1);
obj.top += 1;
if (obj.left > 900 || obj.top > 500) {
canvas.remove(obj);
}
else {
obj.setAngle(obj.getAngle() + 2);
}
});
canvas.renderAll();
window.requestAnimationFrame (animate);
})();

21. Features — Events
fabric.util.observeEvent('object:moved', function(e) {
var activeObject = e.memo.target;
console.log(activeObject.left, activeObject.top);
});
object:scaled
object:selected
object:moved
group:modified
group:selected
before:group:destroyed
after:group:destroyed
mouse:up
selection:cleared
path:created
Will be made more consistent!

22. Features — Text
var myText = new fabric.Text(' Hello world', {
fontfamily: 'delicious'
});
canvas.add(myText);
fontsize
fontweight
fontfamily
fontStyle
textDecoration
textShadow
lineHeight
backgroundColor
strokeStyle
strokeWidth
Will be made more consistent!

23. Features — Text
Multiline supporttext aligning coming soon

24. Features — Text
Multiline support
Relies on Cufon.js
http://kangax.github.com/jstests/canvas_fillText_test

25. Features — Text
Multiline support
Relies on Cufon.js
Renders using any
OTF, TTF, etc. font Each font is a JS file with glyph definitions

26. Features — SVG Parser
Q: How to render SVG shapes on canvas?
A: Transform them to fabric objects.

27. Features — SVG Parser
<path d="M-122.304 84.285C-122.304
84.285 -122.203 86.179 -123.027
86.16C-123.851 86.141 -140.305
38.066 -160.833 40.309C-160.833
40.309 -143.05 32.956 -122.304
84.285z" />
{
path: [
[ "M", -122.304, 84.285 ],
[ "C", -122.304, 84.285,
-122.203, 86.179,
-123.027, 86.16 ],
[ "C", -123.851, ... ],
[ ... ],
...
]
}
Step 1

28. Features — SVG Parser
{
path: [
[ "M", -122.304, 84.285 ],
[ "C", -122.304, 84.285,
-122.203, 86.179,
-123.027, 86.16 ],
[ "C", -123.851, ... ],
[ ... ],
...
]
}
case 'C': // bezierCurveTo, absolute
x = current[5];
y = current[6];
controlX = current[3];
controlY = current[4];
ctx.bezierCurveTo(
current[1] + l,
current[2] + t,
controlX + l,
controlY + t,
x + l,
y + t
);
break;
Step 2

29. Canvas libraries
http://goo.gl/CCRRT

30. Canvas libraries
canvg
The only other library with (good) SVG parser
But no object model

31. Canvas libraries
burst
Lots of features but completely abandoned

32. Canvas libraries
Unit Tests
Hard to come across a library that has them

33. Canvas libraries
easel.js
Probably the most active, similar, and
promising alternative.
But no unit tests or SVG parser :(

34. Fabric use cases
Collages
Basic games
Charts
Basic drawing (paintbrush, diagrams)
Display SVG where unsupported (Android)might be overkill for static charts mouse-based interactions built in

35. What can you build?
mustachified.com

36. Future plans
Smaller footprint
Better docs, tutorials
Custom builder
fabric-to-SVG
Touch compatible (iOS)

37. Smaller footprint
102 KB — minified
33 KB — minified + compressed
Fabric 0.2.5 jQuery 1.6.1
91 KB — minified
32 KB — minified + compressed
Can do even better – optional json2.js, cufon.js + custom builder

38. Smaller footprint
102 KB — minified
33 KB — minified + compressed
with Cufon without cufon.js
86 KB — minified
29 KB — minified + compressed
without json2.js
82 KB — minified
25 KB — minified + compressedJSON missing in FF 3, SF 3.2, OP 10.1, IE 7

39. Docs, Tests
http://kangax.github.com/fabric.js/test/unit/suite_runner
http://kangax.github.com/fabric.js/docs
1000+ tests ATM

40. Demos, Benchmarks
http://kangax.github.com/fabric.js/demos
http://kangax.github.com/fabric.js/test/
raphael_vs_fabric/complex_shape

41. Supported browsers
Firefox 2+
Safari 3+ (& Mobile Safari)
Opera 9.64+
Chrome (all versions should work)
IE9+ (IE7 & 8 via excanvas.js)

42. Thank you!
Questions?
github.com/kangax/fabric.js
@fabric.js
http://spkr8.com/t/7582
@kangax