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
object:scaled
object:selected fabric.util.observeEvent('object:moved', function(e) {
object:moved var activeObject = e.memo.target;
console.log(activeObject.left, activeObject.top);
group:modified });
group:selected
before:group:destroyed
after:group:destroyed
mouse:up
selection:cleared Will be made more consistent!
path:created
22. Features — Text
fontsize
var myText = new fabric.Text('Hello world', {
font weight
fontfamily: 'delicious'
fontfamily
});
fontStyle
canvas.add(myText);
textDecoration
textShadow
lineHeight
backgroundColor
strokeStyle Will be made more consistent!
strokeWidth
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
mouse-based interactions built in
Collages
might be overkill for static charts
Basic games
Charts
Basic drawing (paintbrush, diagrams)
Display SVG where unsupported (Android)