Interactive web with Fabric.js @ meet.js

Interactive

Web With

Fabric.js
by @kangax

Saturday, October 19, 13

Duck
swim()
quack()
WildDuck
swim()
quack()
fly()

ScroogeMcDuck

swim()
quack()
moneyDive()
RubberDuck
swim()
quack()
toy: true


printio.ru


HTML5 Canvas
interface CanvasPathMethods {
...
void closePath(...);
void moveTo(...);
void lineTo(...);
void quadraticCurveTo(...);
void bezierCurveTo(...);
void arcTo(...);
void rect(...);
void arc(...);
void ellipse(...);
...
};

Fabric.js
HTML5 Canvas Library
Interactive object model
on top of <canvas> element


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);

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’);
left: 10,
top: 10,
fill: ‘red’,
width: 100,
height: 100,
angle: 45
});
canvas.add(rect);

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();


Fabric vs canvas
ctx.beginPath();
ctx.moveTo(20, 10);
ctx.lineTo(80, 10);
ctx.quadraticCurveTo(90,
ctx.lineTo(90, 80);
ctx.lineTo(20, 90);
ctx.lineTo(10, 20);
ctx.fill();

10, 90, 20);
90, 80, 90);
90, 10, 80);
10, 20, 10);

left: 10,
top: 10,
width: 80,
height: 80,
rx: 10,
ry: 10
});

fabric.Image

OOP

fabric.Text

fabric.PathGroup


fabric.Image
render()

OOP

fabric.Text
render()

fabric.PathGroup
render()


fabric.Image
render()
toSVG()
toJSON()

OOP

fabric.Text
render()
toSVG()
toJSON()

fabric.PathGroup
render()
toSVG()
toJSON()


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

fabric.PathGroup

fabric.Color
fabric.Gradient
fabric.Pattern
fabric.Shadow

fabric.Observable
fabric.Collection

Features Demo


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);
});

Goals
Simple, Intuitive
Modular
~50 small classes/modules
Custom build: 77-204KB
Flexible architecture: image filters, brushes


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

Goals
Simple, Intuitive
Modular
Encapsulated
Tests, tests, tests


fabricjs.com/test
2000+

Goals
Simple, Intuitive
Modular
Encapsulated
Tests, tests, tests
Cross-browser

Native
Firefox 2+
Safari 3+
Opera 9.64+
Chrome (all)
IE9, IE10, IE11
Excanvas
IE6,7,8

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

Key features
Built-in Interaction
SVG parsing
Free Drawing
Image Filters
Animation
Events


On a Roadmap
Curved text

Multiple layers
for performance

Interactive Text

Canvas
zooming
WebGL renderer

Other libraries


Other libraries
SVG parsing
but no object model
Closest
functionality
Sophisticated
curves handling
Not JS
Recent additions

Mostly unpopular
or inactive


Built with Fabric
Infographics designer


Soccer formation board

Built with Fabric
Tutoring Whiteboard


Arcade Volleyball

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

Help welcome
Translating tutorials
New demos
Fixing bugs

fabricjs.com design
Finding SVG failures

Improvings docs
Spreading the love

Keep in touch
fabricjs.com

github.com/kangax/fabric.js
twitter.com/fabricjs

Thanks!
Questions?

@kangax


Interactive web with Fabric.js @ meet.js

More Related Content

What's hot

Similar to Interactive web with Fabric.js @ meet.js

Recently uploaded

Interactive web with Fabric.js @ meet.js