Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Facade.js

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

Scott Doxey

June 18, 2014
Tweet

More Decks by Scott Doxey

Other Decks in Programming

Transcript

  1. Intro to Facade.js
    Drawing shapes, images and text
    in HTML5 canvas made easy.

    View full-size slide

  2. @neogeek
    Scott Doxey

    View full-size slide

  3. I’m a user experience
    consultant at

    View full-size slide

  4. Disclaimer:
    I built Facade.js

    View full-size slide

  5. In October of 2012
    ! GitHub hosted a
    Game Jam.

    View full-size slide

  6. The theme was
    " forking,
    # branching,
    and $ cloning.

    View full-size slide

  7. I didn’t build a game.

    View full-size slide

  8. Instead I built a library
    for drawing in canvas.

    View full-size slide

  9. After three versions,
    I’m ready to share.

    View full-size slide

  10. Let’s talk about canvas.

    View full-size slide

  11. It’s easy enough to use.
    But it could be easier.

    View full-size slide

  12. Drawing a rectangle.

    View full-size slide

  13. Drawing a rectangle
    with a stroke.

    View full-size slide

  14. Drawing a circle.

    View full-size slide

  15. Drawing a circle
    with a stroke.

    View full-size slide

  16. Drawing a polygon.

    View full-size slide

  17. Drawing a polygon
    with a stroke.

    View full-size slide

  18. Positioning an object.

    View full-size slide

  19. Rotating an object.

    View full-size slide

  20. Rotating an object
    from the center.

    View full-size slide

  21. Scaling an object.

    View full-size slide

  22. Scaling an object
    from the center.

    View full-size slide

  23. Now compare native
    canvas and Facade.js

    View full-size slide

  24. Native canvas

    View full-size slide

  25. Some advantages
    of this format.
    • Easy to read.
    • Format is key/value pairs (similar to CSS).
    • Importable from JSON.

    View full-size slide

  26. So what is Facade.js?

    View full-size slide

  27. Facade.js is a wrapper
    around the canvas 2d
    rendering context.

    View full-size slide

  28. What does that mean?

    View full-size slide

  29. More drawing,
    less coding.

    View full-size slide

  30. How to get started
    with Facade.js

    View full-size slide

  31. http://play.facadejs.com

    View full-size slide

  32. http://docs.facadejs.com

    View full-size slide

  33. http://plugins.facadejs.com

    View full-size slide

  34. 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.

    View full-size slide

  35. https://github.com/facadejs/Facade.js

    View full-size slide

  36. https://github.com/facadejs

    View full-size slide

  37. • 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

    View full-size slide

  38. Scott Doxey
    twitter.com/@neogeek
    github.com/neogeek

    View full-size slide