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