Fabric.js @ Falsy Values

Juriy Zaytsev
Juriy ZaytsevFront-end developer at Bitsonnet
fabric.js
Building a canvas library




       Warsaw   2011
who is kangax?
     kangax.com
who is kangax?

perfectionkills.com                 ES5 compat tables


                      fabric.js


                      Common Feature Tests
                                              PrototypeJS

HTML minifier                                  DOMLint
Game Plan

History
Why fabric?
How it works. Features.
Canvas libraries
Future plans
History
 printio.ru
History
 printio.ru



        All Javascript, no Flash
        Free drawing
        Vectors & images
        Performance
Canvas vs SVG
Why fabric?
 Canvas API sucks is too low level

There was an excruciating need for
     interactive object model
       for canvas element
Why fabric?
native
 var canvasEl = document.getElementById('canvas');
 var ctx = canvasEl.getContext('2d');
 ctx.strokeStyle = '';
 ctx.fillStyle = 'red';
 ctx.fillRect(100, 100, 20, 20);




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);
Why fabric?
native

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


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);
Why fabric?
native

ctx.fillRect(20, 50, 20, 20);




fabric
rect.set(‘left’, 20).set(‘top’, 50);
canvas.renderAll();
Why fabric?
native

ctx.fillRect(20, 50, 20, 20);

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillRect(20, 50, 20, 20);




fabric
rect.set(‘left’, 20).set(‘top’, 50);
canvas.renderAll();
Demo




http://kangax.github.com/fabric.js/test/demo
Under the hood
Upper <canvas>
Group selection




                                   Lower <canvas>
                                     All objects
Under the hood
                                   fabric.Circle
   fabric.Rect                               render()
        render()




fabric.Element
      renderAll()
                          fabric.Triangle
                                  render()
Under the hood
                                        fabric.Circle
    fabric.Rect                                   render()
          render()




fabric.Element                 fabric.Triangle
       renderAll()
                                       render()
Under the hood
     Root “class”. 2D objects           Concrete “subclasses”


fabric.Object                   fabric.Line
                                fabric.Circle
                                fabric.Triangle
                                fabric.Ellipse
              Container
                                fabric.Rect
fabric.Element                  fabric.Polyline
                                fabric.Polygon
                                fabric.Group                    fabric.Color
                                fabric.Text                     fabric.Point
                                fabric.Image                    fabric.Intersection
                                fabric.Path
Under the hood
                                clone
                                cloneAsImage
     Root “class”. 2D objects   complexity      Inherited by all subclasses
                                get
fabric.Object                   getCenter
                                getWidth
                                getElement
                                getHeight
                                intersectsWithObject
                                isActive
                                isType
                                scale
                                scaleToHeight
                                scaleToWidth
                                set
                                setActive
                                setElement
                                straighten
                                toDataURL
                                toJSON
                                toGrayscale
                                ...
Features — Animation
                      fxCenterObjectV: function (...) {
fabric.util.animate     ...

                          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();
fxCenterObjectV             },
                            onComplete: function() {
fxCenterObjectH                object.setCoords();
                               onComplete();
fxStraightenObject          }
                          });

fxRemove                  ...
                      }
...
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);
                        })();
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
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
Features — Text
Multiline support




                    text aligning coming soon
Features — Text
Multiline support
Relies on Cufon.js




http://kangax.github.com/jstests/canvas_fillText_test
Features — Text
       Multiline support
       Relies on Cufon.js
       Renders 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      Step 1       path: [
86.16C-123.851 86.141 -140.305                      [ "M", -122.304, 84.285 ],
38.066 -160.833 40.309C-160.833                     [ "C", -122.304, 84.285,
40.309 -143.05 32.956 -122.304                             -122.203, 86.179,
84.285z" />
                                                             -123.027, 86.16 ],
                                                      [ "C", -123.851, ... ],
                                                      [ ... ],
                                                      ...
                                                  ]
                                              }
Features — SVG Parser



{                                            case 'C': // bezierCurveTo, absolute
    path: [                                    x = current[5];
      [ "M", -122.304, 84.285 ],               y = current[6];
      [ "C", -122.304, 84.285,      Step 2     controlX = current[3];
             -122.203, 86.179,                 controlY = current[4];
                                               ctx.bezierCurveTo(
               -123.027, 86.16 ],                 current[1] + l,
        [ "C", -123.851, ... ],                   current[2] + t,
        [ ... ],                                  controlX + l,
        ...                                       controlY + t,
    ]                                             x + l,
}                                                 y + t
                                               );
                                               break;
Canvas libraries



   http://goo.gl/CCRRT
Canvas libraries




  canvg
   The only other library with (good) SVG parser
   But no object model
Canvas libraries




  burst
   Lots of features but completely abandoned
Canvas libraries




  Unit Tests
   Hard 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
                 mouse-based interactions built in


Collages
                           might be overkill for static charts

Basic games
Charts
Basic drawing (paintbrush, diagrams)
Display SVG where unsupported (Android)
What can you build?
     mustachified.com
Future plans

Smaller footprint
Better docs, tutorials
Custom builder
fabric-to-SVG
Touch compatible (iOS)
Smaller footprint

        Fabric 0.2.5                     jQuery 1.6.1

102 KB — minified                 91 KB — minified
 33 KB — minified + compressed    32 KB — minified + compressed



Can do even better – optional json2.js, cufon.js + custom builder
Smaller footprint
          with Cufon                              without cufon.js

 102 KB — minified                            86 KB — minified
  33 KB — minified + compressed               29 KB — minified + compressed




                                                  without json2.js

JSON missing in FF 3, SF 3.2, OP 10.1, IE 7    82 KB — minified
                                              25 KB — minified + compressed
Docs, Tests
                                  1000+ tests ATM




        http://kangax.github.com/fabric.js/docs

http://kangax.github.com/fabric.js/test/unit/suite_runner
Demos, Benchmarks




 http://kangax.github.com/fabric.js/test/
     raphael_vs_fabric/complex_shape


 http://kangax.github.com/fabric.js/demos
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?


             http://spkr8.com/t/7582




github.com/kangax/fabric.js
                  @fabric.js
                  @kangax
1 of 42

Recommended

Fabric.js — Building a Canvas Library by
Fabric.js — Building a Canvas LibraryFabric.js — Building a Canvas Library
Fabric.js — Building a Canvas LibraryJuriy Zaytsev
20K views42 slides
Interactive web with Fabric.js @ meet.js by
Interactive web with Fabric.js @ meet.jsInteractive web with Fabric.js @ meet.js
Interactive web with Fabric.js @ meet.jsJuriy Zaytsev
9.4K views31 slides
Fabricjs ppt by
Fabricjs pptFabricjs ppt
Fabricjs pptCubet Techno Labs
654 views21 slides
Krnet2018 kakao container cloud dkos by
Krnet2018 kakao container cloud dkosKrnet2018 kakao container cloud dkos
Krnet2018 kakao container cloud dkosWon-Chon Jung
4.2K views31 slides
On measurement of twist per inch. by
On measurement of twist per inch.On measurement of twist per inch.
On measurement of twist per inch.MD. SAJJADUL KARIM BHUIYAN
1.8K views4 slides
Entity framework code first by
Entity framework code firstEntity framework code first
Entity framework code firstConfiz
4.2K views33 slides

More Related Content

What's hot

Iterator Pattern by
Iterator PatternIterator Pattern
Iterator Patternmelbournepatterns
1.6K views13 slides
Integrating React.js with PHP projects by
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projectsIgnacio Martín
7K views167 slides
Java Servlet Programming under Ubuntu Linux by Tushar B Kute by
Java Servlet Programming under Ubuntu Linux by Tushar B KuteJava Servlet Programming under Ubuntu Linux by Tushar B Kute
Java Servlet Programming under Ubuntu Linux by Tushar B KuteTushar B Kute
4.4K views35 slides
fungsi - fungsi ikon ms word 2007 by
fungsi - fungsi ikon ms word 2007 fungsi - fungsi ikon ms word 2007
fungsi - fungsi ikon ms word 2007 Rafly8
13.5K views45 slides
Fabric Structure and Design by
Fabric Structure and DesignFabric Structure and Design
Fabric Structure and DesignMdGolamMortuzaLimon
293 views12 slides
Enterprise Tic-Tac-Toe by
Enterprise Tic-Tac-ToeEnterprise Tic-Tac-Toe
Enterprise Tic-Tac-ToeScott Wlaschin
15.1K views86 slides

What's hot(20)

Integrating React.js with PHP projects by Ignacio Martín
Integrating React.js with PHP projectsIntegrating React.js with PHP projects
Integrating React.js with PHP projects
Ignacio Martín7K views
Java Servlet Programming under Ubuntu Linux by Tushar B Kute by Tushar B Kute
Java Servlet Programming under Ubuntu Linux by Tushar B KuteJava Servlet Programming under Ubuntu Linux by Tushar B Kute
Java Servlet Programming under Ubuntu Linux by Tushar B Kute
Tushar B Kute4.4K views
fungsi - fungsi ikon ms word 2007 by Rafly8
fungsi - fungsi ikon ms word 2007 fungsi - fungsi ikon ms word 2007
fungsi - fungsi ikon ms word 2007
Rafly813.5K views
Enterprise Tic-Tac-Toe by Scott Wlaschin
Enterprise Tic-Tac-ToeEnterprise Tic-Tac-Toe
Enterprise Tic-Tac-Toe
Scott Wlaschin15.1K views
Jacquard (fabric manufacturing) by RitishRana3
Jacquard (fabric manufacturing)Jacquard (fabric manufacturing)
Jacquard (fabric manufacturing)
RitishRana3174 views
Javascript this keyword by Pham Huy Tung
Javascript this keywordJavascript this keyword
Javascript this keyword
Pham Huy Tung2.3K views
Asp.net event handler by Sireesh K
Asp.net event handlerAsp.net event handler
Asp.net event handler
Sireesh K728 views
N-Queens Combinatorial Puzzle meets Cats by Philip Schwarz
N-Queens Combinatorial Puzzle meets CatsN-Queens Combinatorial Puzzle meets Cats
N-Queens Combinatorial Puzzle meets Cats
Philip Schwarz33 views
금융It시스템의 이해 2편 by Seong-Bok Lee
금융It시스템의 이해 2편금융It시스템의 이해 2편
금융It시스템의 이해 2편
Seong-Bok Lee3.6K views
Apostila de cálculo técnico têxtil escrita por marco fuziwara by wsilveirasouza
Apostila de cálculo técnico têxtil escrita por marco fuziwaraApostila de cálculo técnico têxtil escrita por marco fuziwara
Apostila de cálculo técnico têxtil escrita por marco fuziwara
wsilveirasouza23.4K views
Element of Textile I A Basic need to Understand I by Anil Kumar
Element of Textile I  A Basic need to Understand IElement of Textile I  A Basic need to Understand I
Element of Textile I A Basic need to Understand I
Anil Kumar438 views
CSS3 Flex Layout by Neha Sharma
CSS3 Flex LayoutCSS3 Flex Layout
CSS3 Flex Layout
Neha Sharma923 views
Build tech/Construction Textiles by PavanKumar4024
Build tech/Construction TextilesBuild tech/Construction Textiles
Build tech/Construction Textiles
PavanKumar4024428 views

Similar to Fabric.js @ Falsy Values

jQuery by
jQueryjQuery
jQueryJon Erickson
1.7K views20 slides
Hidden Gems in Swift by
Hidden Gems in SwiftHidden Gems in Swift
Hidden Gems in SwiftNetguru
1.3K views47 slides
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docx by
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docxasmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docx
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docxfredharris32
4 views98 slides
Building mobile web apps with Mobello by
Building mobile web apps with MobelloBuilding mobile web apps with Mobello
Building mobile web apps with MobelloJeong-Geun Kim
2.9K views51 slides
Backbone.js: Run your Application Inside The Browser by
Backbone.js: Run your Application Inside The BrowserBackbone.js: Run your Application Inside The Browser
Backbone.js: Run your Application Inside The BrowserHoward Lewis Ship
2.7K views85 slides
HTML 5_Canvas by
HTML 5_CanvasHTML 5_Canvas
HTML 5_CanvasVishakha Vaidya
310 views16 slides

Similar to Fabric.js @ Falsy Values(20)

Hidden Gems in Swift by Netguru
Hidden Gems in SwiftHidden Gems in Swift
Hidden Gems in Swift
Netguru1.3K views
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docx by fredharris32
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docxasmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docx
asmt7~$sc_210_-_assignment_7_fall_15.docasmt7cosc_210_-_as.docx
fredharris324 views
Building mobile web apps with Mobello by Jeong-Geun Kim
Building mobile web apps with MobelloBuilding mobile web apps with Mobello
Building mobile web apps with Mobello
Jeong-Geun Kim2.9K views
Backbone.js: Run your Application Inside The Browser by Howard Lewis Ship
Backbone.js: Run your Application Inside The BrowserBackbone.js: Run your Application Inside The Browser
Backbone.js: Run your Application Inside The Browser
Howard Lewis Ship2.7K views
WPF L02-Graphics, Binding and Animation by Mohammad Shaker
WPF L02-Graphics, Binding and AnimationWPF L02-Graphics, Binding and Animation
WPF L02-Graphics, Binding and Animation
Mohammad Shaker7.9K views
SVGo: a Go Library for SVG generation by Anthony Starks
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Anthony Starks1.6K views
Svcc Building Rich Applications with Groovy's SwingBuilder by Andres Almiray
Svcc Building Rich Applications with Groovy's SwingBuilderSvcc Building Rich Applications with Groovy's SwingBuilder
Svcc Building Rich Applications with Groovy's SwingBuilder
Andres Almiray1.1K views
Cocoa Design Patterns in Swift by Michele Titolo
Cocoa Design Patterns in SwiftCocoa Design Patterns in Swift
Cocoa Design Patterns in Swift
Michele Titolo9.1K views
CodeMash - Building Rich Apps with Groovy SwingBuilder by Andres Almiray
CodeMash - Building Rich Apps with Groovy SwingBuilderCodeMash - Building Rich Apps with Groovy SwingBuilder
CodeMash - Building Rich Apps with Groovy SwingBuilder
Andres Almiray3.3K views
Idioms in swift 2016 05c by Kaz Yoshikawa
Idioms in swift 2016 05cIdioms in swift 2016 05c
Idioms in swift 2016 05c
Kaz Yoshikawa440 views
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient by Bin Shao
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Bin Shao520 views
2008 Sccc Inheritance by bergel
2008 Sccc Inheritance2008 Sccc Inheritance
2008 Sccc Inheritance
bergel492 views
Swift Tableview iOS App Development by Ketan Raval
Swift Tableview iOS App DevelopmentSwift Tableview iOS App Development
Swift Tableview iOS App Development
Ketan Raval1.1K views
J Query The Write Less Do More Javascript Library by rsnarayanan
J Query   The Write Less Do More Javascript LibraryJ Query   The Write Less Do More Javascript Library
J Query The Write Less Do More Javascript Library
rsnarayanan1.9K views

Recently uploaded

Business Analyst Series 2023 - Week 3 Session 5 by
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5DianaGray10
300 views20 slides
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensorssugiuralab
21 views15 slides
6g - REPORT.pdf by
6g - REPORT.pdf6g - REPORT.pdf
6g - REPORT.pdfLiveplex
10 views23 slides
Info Session November 2023.pdf by
Info Session November 2023.pdfInfo Session November 2023.pdf
Info Session November 2023.pdfAleksandraKoprivica4
13 views15 slides
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...Bernd Ruecker
40 views69 slides
NET Conf 2023 Recap by
NET Conf 2023 RecapNET Conf 2023 Recap
NET Conf 2023 RecapLee Richardson
10 views71 slides

Recently uploaded(20)

Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10300 views
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by sugiuralab
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors
sugiuralab21 views
6g - REPORT.pdf by Liveplex
6g - REPORT.pdf6g - REPORT.pdf
6g - REPORT.pdf
Liveplex10 views
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker40 views
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
Case Study Copenhagen Energy and Business Central.pdf by Aitana
Case Study Copenhagen Energy and Business Central.pdfCase Study Copenhagen Energy and Business Central.pdf
Case Study Copenhagen Energy and Business Central.pdf
Aitana16 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb14 views
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by Dr. Jimmy Schwarzkopf
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf
Piloting & Scaling Successfully With Microsoft Viva by Richard Harbridge
Piloting & Scaling Successfully With Microsoft VivaPiloting & Scaling Successfully With Microsoft Viva
Piloting & Scaling Successfully With Microsoft Viva
HTTP headers that make your website go faster - devs.gent November 2023 by Thijs Feryn
HTTP headers that make your website go faster - devs.gent November 2023HTTP headers that make your website go faster - devs.gent November 2023
HTTP headers that make your website go faster - devs.gent November 2023
Thijs Feryn22 views

Fabric.js @ Falsy Values

  • 1. fabric.js Building a canvas library Warsaw 2011
  • 2. who is kangax? kangax.com
  • 3. who is kangax? perfectionkills.com ES5 compat tables fabric.js Common Feature Tests PrototypeJS HTML minifier DOMLint
  • 4. Game Plan History Why fabric? How it works. Features. Canvas libraries Future plans
  • 6. History printio.ru All Javascript, no Flash Free drawing Vectors & images Performance
  • 8. Why fabric? Canvas API sucks is too low level There was an excruciating need for interactive object model for canvas element
  • 9. Why fabric? native var canvasEl = document.getElementById('canvas'); var ctx = canvasEl.getContext('2d'); ctx.strokeStyle = ''; ctx.fillStyle = 'red'; ctx.fillRect(100, 100, 20, 20); 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);
  • 10. Why fabric? native 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(); 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);
  • 11. Why fabric? native ctx.fillRect(20, 50, 20, 20); fabric rect.set(‘left’, 20).set(‘top’, 50); canvas.renderAll();
  • 12. Why fabric? native ctx.fillRect(20, 50, 20, 20); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillRect(20, 50, 20, 20); fabric rect.set(‘left’, 20).set(‘top’, 50); canvas.renderAll();
  • 14. Under the hood Upper <canvas> Group selection Lower <canvas> All objects
  • 15. Under the hood fabric.Circle fabric.Rect render() render() fabric.Element renderAll() fabric.Triangle render()
  • 16. Under the hood fabric.Circle fabric.Rect render() render() fabric.Element fabric.Triangle renderAll() render()
  • 17. Under the hood Root “class”. 2D objects Concrete “subclasses” fabric.Object fabric.Line fabric.Circle fabric.Triangle fabric.Ellipse Container fabric.Rect fabric.Element fabric.Polyline fabric.Polygon fabric.Group fabric.Color fabric.Text fabric.Point fabric.Image fabric.Intersection fabric.Path
  • 18. Under the hood clone cloneAsImage Root “class”. 2D objects complexity Inherited by all subclasses get fabric.Object getCenter getWidth getElement getHeight intersectsWithObject isActive isType scale scaleToHeight scaleToWidth set setActive setElement straighten toDataURL toJSON toGrayscale ...
  • 19. Features — Animation fxCenterObjectV: function (...) { fabric.util.animate ... 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(); fxCenterObjectV }, onComplete: function() { fxCenterObjectH object.setCoords(); onComplete(); fxStraightenObject } }); fxRemove ... } ...
  • 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
  • 23. Features — Text Multiline support text aligning coming soon
  • 24. Features — Text Multiline support Relies on Cufon.js http://kangax.github.com/jstests/canvas_fillText_test
  • 25. Features — Text Multiline support Relies on Cufon.js Renders using any OTF, TTF, etc. font Each font is a JS file with glyph definitions
  • 26. Features — SVG Parser Q: How to render SVG shapes on canvas? A: Transform them to fabric objects.
  • 27. Features — SVG Parser <path d="M-122.304 84.285C-122.304 { 84.285 -122.203 86.179 -123.027 Step 1 path: [ 86.16C-123.851 86.141 -140.305 [ "M", -122.304, 84.285 ], 38.066 -160.833 40.309C-160.833 [ "C", -122.304, 84.285, 40.309 -143.05 32.956 -122.304 -122.203, 86.179, 84.285z" /> -123.027, 86.16 ], [ "C", -123.851, ... ], [ ... ], ... ] }
  • 28. Features — SVG Parser { case 'C': // bezierCurveTo, absolute path: [ x = current[5]; [ "M", -122.304, 84.285 ], y = current[6]; [ "C", -122.304, 84.285, Step 2 controlX = current[3]; -122.203, 86.179, controlY = current[4]; ctx.bezierCurveTo( -123.027, 86.16 ], current[1] + l, [ "C", -123.851, ... ], current[2] + t, [ ... ], controlX + l, ... controlY + t, ] x + l, } y + t ); break;
  • 29. Canvas libraries http://goo.gl/CCRRT
  • 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)
  • 35. What can you build? mustachified.com
  • 36. Future plans Smaller footprint Better docs, tutorials Custom builder fabric-to-SVG Touch compatible (iOS)
  • 37. Smaller footprint Fabric 0.2.5 jQuery 1.6.1 102 KB — minified 91 KB — minified 33 KB — minified + compressed 32 KB — minified + compressed Can do even better – optional json2.js, cufon.js + custom builder
  • 38. Smaller footprint with Cufon without cufon.js 102 KB — minified 86 KB — minified 33 KB — minified + compressed 29 KB — minified + compressed without json2.js JSON missing in FF 3, SF 3.2, OP 10.1, IE 7 82 KB — minified 25 KB — minified + compressed
  • 39. Docs, Tests 1000+ tests ATM http://kangax.github.com/fabric.js/docs http://kangax.github.com/fabric.js/test/unit/suite_runner
  • 40. Demos, Benchmarks http://kangax.github.com/fabric.js/test/ raphael_vs_fabric/complex_shape http://kangax.github.com/fabric.js/demos
  • 41. Supported browsers Firefox 2+ Safari 3+ (& Mobile Safari) Opera 9.64+ Chrome (all versions should work) IE9+ (IE7 & 8 via excanvas.js)
  • 42. Thank you! Questions? http://spkr8.com/t/7582 github.com/kangax/fabric.js @fabric.js @kangax