Facade.js
Drawing shapes, images and text in HTML5 canvas made easy.
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Scott Doxey
twitter.com/@neogeek
github.com/neogeek
dribbble.com/neogeek
Full stack developer
Slide 4
Slide 4 text
Why build a canvas drawing library
when so many already exist?
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
The experience of building a library
from scratch in a technology one is
not proficient with is invaluable.
Slide 7
Slide 7 text
Vision for Facade.js
• Easy to use
• Familiar syntax
• Fast rendering
• Small file size
• Extensible via plugins
Slide 8
Slide 8 text
Getting Started With Facade.js
Slide 9
Slide 9 text
$ bower install Facade.js
or use the CDN at http://cdn.facadejs.com/0.3.0-beta/facade.min.js
Slide 10
Slide 10 text
Facade.js Examples
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
So what is everything
Facade.js can do?
Slide 14
Slide 14 text
Core Features of Facade.js
• Draw custom polygons, circles, lines, rectangles
• Render images
• Animate images via sprites
• Draw Text
• Group Facade.js objects
• Handle the animation loop
Slide 15
Slide 15 text
Does Facade.js do
anything else?
Slide 16
Slide 16 text
Nope.
Slide 17
Slide 17 text
Facade.js is a finely tuned wrapper
for the HTML5 canvas renderer.
Slide 18
Slide 18 text
Facade.js Plugins
Slide 19
Slide 19 text
Gamepad.js
Simple customizable event binding for the HTML Gamepad API.
https://github.com/neogeek/gamepad.js
Slide 20
Slide 20 text
facadejs-Box2D-plugin
An API wrapper for the Box2D JavaScript library.
https://github.com/neogeek/facadejs-Box2D-plugin
Slide 21
Slide 21 text
facadejs-SATjs-plugin
An API wrapper for the SAT-js library, a simple JavaScript
library for performing 2D collision detection.
https://github.com/neogeek/facadejs-SATjs-plugin
Slide 22
Slide 22 text
plastick.js
A lightweight game loop framework utilizing Facade.js.
https://github.com/syntaxtsb/plastick.js