Intro to Facade.js

An introduction of the HTML5 canvas drawing library Facade.js and how it compares to working in native canvas.

Code: https://github.com/neogeek/talks/tree/master/intro-to-facadejs

Transcript

1. Intro to Facade.js Drawing shapes, images and text in HTML5 canvas made easy.
2. @neogeek Scott Doxey
3. I’m a user experience consultant at
4. Disclaimer: I built Facade.js
5. In October of 2012 ! GitHub hosted a Game Jam.
6. The theme was " forking, # branching, and $ cloning.
7. I didn’t build a game.
8. Instead I built a library for drawing in canvas.
9. After three versions, I’m ready to share.
10. Let’s talk about canvas.
11. It’s easy enough to use. But it could be easier.
12. Drawing a rectangle.
13. Drawing a rectangle with a stroke.
14. Drawing a circle.
15. Drawing a circle with a stroke.
16. Drawing a polygon.
17. Drawing a polygon with a stroke.
18. Positioning an object.
19. Rotating an object.
20. Rotating an object from the center.
21. Scaling an object.
22. Scaling an object from the center.
23. Now compare native canvas and Facade.js
24. Native canvas
25. Facade.js
26. Some advantages of this format. • Easy to read. • Format is key/value pairs (similar to CSS). • Importable from JSON.
27. So what is Facade.js?
28. Facade.js is a wrapper around the canvas 2d rendering context.
29. What does that mean?
30. More drawing, less coding.
31. How to get started with Facade.js
32. http://play.facadejs.com
33. http://docs.facadejs.com
34. http://plugins.facadejs.com
35. Plugins in Development • Gamepad.js - Simple customizable event binding for the HTML Gamepad API. • Box2D-plugin - A wrapper for the Box2D JavaScript library. • SATjs-plugin - A wrapper for the SAT-js library, a simple JavaScript library for performing 2D collision detection.
36. https://github.com/facadejs/Facade.js
37. https://github.com/facadejs
38. • Interactive Demos: http://play.facadejs.com • Documentation: http://docs.facadejs.com • Plugins: http://plugins.facadejs.com • ! Repo: http://github.com/facadejs/Facade.js • ! Organization: http://github.com/facadejs
39. DEMO
40. Questions?
41. Thank you!
42. Scott Doxey twitter.com/@neogeek github.com/neogeek