Intro to Facade.js - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@neogeek Scott Doxey

Slide 3

Slide 3 text

I’m a user experience consultant at

Slide 4

Slide 4 text

Disclaimer: I built Facade.js

Slide 5

Slide 5 text

In October of 2012 ! GitHub hosted a Game Jam.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

I didn’t build a game.

Slide 8

Slide 8 text

Instead I built a library for drawing in canvas.

Slide 9

Slide 9 text

After three versions, I’m ready to share.

Slide 10

Slide 10 text

Let’s talk about canvas.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Drawing a rectangle.

Slide 13

Slide 13 text

Drawing a rectangle with a stroke.

Slide 14

Slide 14 text

Drawing a circle.

Slide 15

Slide 15 text

Drawing a circle with a stroke.

Slide 16

Slide 16 text

Drawing a polygon.

Slide 17

Slide 17 text

Drawing a polygon with a stroke.

Slide 18

Slide 18 text

Positioning an object.

Slide 19

Slide 19 text

Rotating an object.

Slide 20

Slide 20 text

Rotating an object from the center.

Slide 21

Slide 21 text

Scaling an object.

Slide 22

Slide 22 text

Scaling an object from the center.

Slide 23

Slide 23 text

Now compare native canvas and Facade.js

Slide 24

Slide 24 text

Native canvas

Slide 25

Slide 25 text

Facade.js

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

So what is Facade.js?

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

What does that mean?

Slide 30

Slide 30 text

More drawing, less coding.

Slide 31

Slide 31 text

How to get started with Facade.js

Slide 32

Slide 32 text

http://play.facadejs.com

Slide 33

Slide 33 text

http://docs.facadejs.com

Slide 34

Slide 34 text

http://plugins.facadejs.com

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

https://github.com/facadejs

Slide 38

Slide 38 text

• 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