Post on 15-May-2015
description
fabric.jsBuilding a canvas library
Warsaw ♥ 2011
who is kangax?kangax.com
Common Feature Tests
perfectionkills.com ES5 compat tables
HTML minifier
PrototypeJS
DOMLint
fabric.js
who is kangax?
HistoryWhy fabric?How it works. Features.Canvas librariesFuture plans
Game Plan
Historyprintio.ru
Historyprintio.ru
All Javascript, no FlashFree drawingVectors & imagesPerformance
Canvas vs SVG
Why fabric?
There was an excruciating need forinteractive object model
for canvas element
Canvas API sucks is too low level
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
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
Why fabric?
rect.set(‘left’, 20).set(‘top’, 50);canvas.renderAll();
ctx.fillRect(20, 50, 20, 20);
native
fabric
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
Demo
http://kangax.github.com/fabric.js/test/demo
Under the hoodUpper <canvas>
Lower <canvas>
Group selection
All objects
Under the hood
fabric.Triangle
fabric.Circlefabric.Rect
fabric.Element
render()render()
render()
renderAll()
Under the hood
fabric.Triangle
fabric.Circlefabric.Rect
fabric.Element
render()
render()renderAll()
render()
Under the hood
fabric.Element
fabric.Object fabric.Linefabric.Circlefabric.Trianglefabric.Ellipsefabric.Rectfabric.Polylinefabric.Polygonfabric.Groupfabric.Textfabric.Imagefabric.Path
Root “class”. 2D objects
Container
Concrete “subclasses”
fabric.Colorfabric.Pointfabric.Intersection
Under the hood
fabric.Object
Root “class”. 2D objects
clonecloneAsImagecomplexitygetgetCentergetWidthgetElementgetHeightintersectsWithObjectisActiveisTypescalescaleToHeightscaleToWidthsetsetActivesetElementstraightentoDataURLtoJSONtoGrayscale...
Inherited by all subclasses
Features — Animationfabric.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(); } }); ...}
fxCenterObjectVfxCenterObjectHfxStraightenObjectfxRemove...
Features — AnimationOr 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);})();
Features — Eventsfabric.util.observeEvent('object:moved', function(e) {
var activeObject = e.memo.target;
console.log(activeObject.left, activeObject.top);
});
object:scaledobject:selectedobject:moved
group:modifiedgroup:selectedbefore:group:destroyedafter:group:destroyed
mouse:up
selection:clearedpath:created
Will be made more consistent!
Features — Textvar myText = new fabric.Text('Hello world', {
fontfamily: 'delicious'
});
canvas.add(myText);
fontsizefontweightfontfamilyfontStyle
textDecorationtextShadow
lineHeightbackgroundColor
strokeStylestrokeWidth
Will be made more consistent!
Features — TextMultiline support
text aligning coming soon
Features — TextMultiline supportRelies on Cufon.js
http://kangax.github.com/jstests/canvas_fillText_test
Features — TextMultiline supportRelies on Cufon.jsRenders using any OTF, TTF, etc. font
Each font is a JS file with glyph definitions
Features — SVG Parser
Q: How to render SVG shapes on canvas?
A: Transform them to fabric objects.
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
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
Canvas libraries
canvgThe only other library with (good) SVG parserBut no object model
Canvas libraries
burstLots of features but completely abandoned
Canvas libraries
Unit TestsHard to come across a library that has them
Canvas libraries
easel.js
Probably the most active, similar, and promising alternative.But no unit tests or SVG parser :(
Fabric use cases
CollagesBasic gamesChartsBasic drawing (paintbrush, diagrams)Display SVG where unsupported (Android)
might be overkill for static charts
mouse-based interactions built in
What can you build?mustachified.com
Future plans
Smaller footprintBetter docs, tutorialsCustom builderfabric-to-SVGTouch compatible (iOS)
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
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 + compressed
JSON missing in FF 3, SF 3.2, OP 10.1, IE 7
Docs, Tests
http://kangax.github.com/fabric.js/test/unit/suite_runner
http://kangax.github.com/fabric.js/docs
1000+ tests ATM
Demos, Benchmarks
http://kangax.github.com/fabric.js/demos
http://kangax.github.com/fabric.js/test/raphael_vs_fabric/complex_shape
Supported browsers
Firefox 2+Safari 3+ (& Mobile Safari)Opera 9.64+Chrome (all versions should work)IE9+ (IE7 & 8 via excanvas.js)
Thank you!Questions?
github.com/kangax/fabric.js@fabric.js
http://spkr8.com/t/7582
@kangax