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

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. Questions?

40. DEMO

41. Thank you!

42. Scott Doxey
!
twitter.com/@neogeek
github.com/neogeek