The easiest way to work with HTML5 canvas. And it's just Javascript. See in action at fabricjs.com/demos By @kangax & @andreabogazzi
canvas, html5
- Tweets 1,043
- Following 100
- Followers 3,306
- Likes 156
FabricJS πΊπ¦ retweeted
fabric.js + 1 SVG shape + some imagination (in 20 LOC) makes for another trippy demo β http://goo.gl/5FdUV
1
4
Nice overview of canvas libraries including Fabric.js by @andywalpole http://goo.gl/z79zr We know about lack of docs/demos. More coming soon
1
Fabric down from 105KB to 80KB (24KB gzipped) by making some (rare) functionality optional. More reduction coming soon. http://goo.gl/fRsle
3
2
Few last commits made SVG parsing even better. If you have a shape that doesn't render correctly, make sure to file a bug.
FabricJS πΊπ¦ retweeted
And so @fabricjs can finally parse SVG paths w. arcs β http://twitpic.com/5lghh8
1
1
`canvas.observe` can now accept multiple events in one argument: `canvas.observe({ 'mouse:up': function(){}, 'mouse:down': function(){} })`
1
`fabric.Element` is renamed to `fabric.Canvas` (makes more sense, doesn't it?) Old name is aliased for back-compat. (but deprecated)
Need to completely disable selection on canvas (e.g. in a game)? Just do `canvas.selection = false`. Just landed, thanks to contributors.
1
2
Events in fabric are now scoped to canvas instances! Instead of `fabric.util.observeEvent(...)`, just do `canvas.observe(...)`
An example of extending fabric to fire "object:over", "object:out" events β http://kangax.github.com/fabric.js/demos/hovering/
1
Oh, cool! Tetris built with Fabric.js (by @end33r) β http://dl4.pl/tetris
There's now FAQ on fabric's github wiki β https://github.com/kangax/fabric.js/wiki/FAQ Will be adding more Q/A's as they come.
Another likely future addition: `rect.setWidth('+10')` as a sugar for `rect.setWidth(rect.getWidth() + 10)` Mmmm, so good.
And support for passing object of prop/value pairs to `set` β `rect.set({ angle: 30, fill: '#333', opacity: 0.5 })`
Few API enhancements just in: `rect.set('fill', 'red')` --> `rect.setFill('red')` (accessors generated dynamically for all state properties)
New demo β animating crosses β shows how to create a custom "class" in fabric http://kangax.github.com/fabric.js/demos/cross/
1
Check out simple demo with sliding ladybugs (at just ~20 LOC) made during #falsyvalues conf. β http://goo.gl/70nwl
1