An introduction and demonstration of graphics and animation techniques using canvas and CSS3 working in concert in webkit with html5. Targeted for Palm webOS devices, but compatible with other webkit implementations.

2. Rockstar Graphics
with HTML5
Dave Balmer, Gobico Games
Developer of Wobble Words and Poker Drops
April 24, 2010

3. A Clean Slate for Web Developers
Breaking your skills out of the browser

4. A Clean Slate for Web Developers
Breaking your skills out of the browser
• JavaScript is the focus instead of an addition
• HTML and the DOM provide basic structure;
layered semantic markup is not a priority
• CSS is the presentation workhorse
• Browser compatibility is not an issue, so
development
is faster
• Most frameworks designed for browsers are not
optimal for mobile devices because they’re firmly
entrenched in browser-centric approaches (I’m
looking at you, JQuery)

5. The Webkit Stack

6. The Webkit Stack
JavaScript is front and center
App Process
JavaScript
Canvas CSS3
Webkit
Linux Kernel
ARM CPU Hardware Graphics

7. Rockstar Graphics with HTML5
Getting the most out of native code (without coding native)

8. Rockstar Graphics with HTML5
Getting the most out of native code (without coding native)
• Canvas Element
• CSS3
• Layering techniques
• Efficient JavaScript
• Trickery

9. Canvas Element

10. Canvas Element
What it is and when to use it
• An empty box element where JavaScript directly
draws lines, shapes, images, and other 2D
primitives
• Very similar concept to Java2D and Quartz 2D
• Sophisticated path construction with strokes and fills
• Image layering and transformation
• Uses native code under the hood, so render time is fast
• Use it to break outside the DOM “box” model
• Ad-hoc graphs and charts
• Synchronized animation with multiple images

11. Sample Code: Line Graph
A simple Canvas example
• Basic stage
• Simple “Graph” class
• Array goes in
• Graph goes out
• Auto-scales
Break away to
example before
clicking -- reveal
screen after code
walkthru

12. Sample Code: Line Graph
A simple Canvas example
• Basic stage
• Simple “Graph” class
• Array goes in
• Graph goes out
• Auto-scales
• Boring! Break away to
example before
• Does illustrate the point clicking -- reveal
screen after code
• Definitely not “Rockstar” material walkthru
• We’ll add some goodies later

13. Canvas: Other Uses
Drawing lines is fine, but you can do a lot more
• Image manipulation
• Transformations (scale, rotate)
• Compositing (think Photoshop layers)
• Animation
• Sprites
• Complex physics
• The downside: your animation loop will be in JavaScript,
which can be difficult to get great performance

14. Canvas Gotchas
Current limitations to keep in mind
• Today’s webOS Canvas element has limitations:
• No pixel operations (getImageData, putImageData)
• No shadows (shadowOffsetX/Y, shadowBlur, shadowColor)
• Cannot save raster contents of canvas (toDataURL)
• No “round” or “mitre” lineJoin or lineCap (“bevel” only)

15. Canvas Gotchas
Current limitations to keep in mind
• Today’s webOS Canvas element has limitations:
• No pixel operations (getImageData, putImageData)
• No shadows (shadowOffsetX/Y, shadowBlur, shadowColor)
• Cannot save raster contents of canvas (toDataURL)
• No “round” or “mitre” lineJoin or lineCap (“bevel” only)
• And Text? Forget it.
• The W3 spec for Canvas text rendering is exciting,
but largely unsupported anywhere
• Layering with DOM/CSS3 is the practical approach
for now

16. CSS3

17. CSS3 Mention the
excitingg news
about 3D and
What it is and when to use it hardware
accelerated
transitions
• Sophisticated declarative styling language
• Pixel-perfect font, color, image properties
• Scale, rotate, stretch, and move any DOM element
• Animate property changes with simple physics
• Huge benefits for
• Adding unique and consistent look and feel to your apps
• Creating your own specialized widgets
• Simple, unsynchronized animations

18. Sample Code: Screensaver
A contrived yet fun example of CSS3 animation
• CSS3 animation
• Minimal JavaScript
• Timer loop
• Setting properties
• Letting CSS do the hard stuff
Break away to
example before
clicking -- reveal
screen after code
walkthru

19. Sample Code: Screensaver
A contrived yet fun example of CSS3 animation
• CSS3 animation
• Minimal JavaScript
• Timer loop
• Setting properties
• Letting CSS do the hard stuff
Break away to
example before
clicking -- reveal
screen after code
walkthru

20. CSS3 Gotchas
Current webOS limitations to keep in mind

21. CSS3 Gotchas
Current webOS limitations to keep in mind
• No custom fonts
• No textShadow or boxShadow (bummer)
• No gradients
• Have to use gradient background images today
• No transitionEnd event
• Limits synchronized animation chaining
• For now, have to use setTimeout to match transition
interval
and “hope for the best”

22. Layering

23. Layering
Using CSS3 and Canvas elements together can be powerful
• Both can be controlled with JavaScript
• A good example is a network diagram:

24. Layering
Using CSS3 and Canvas elements together can be powerful
• Both can be controlled with JavaScript
• A good example is a network diagram:
CSS Styled Elements + Canvas 2D Lines
2 5
1 4 7
3 6

25. Sample Code: Line Graph +
Our first Canvas example was pretty boring
• Canvas still draws the
graph
• CSS adds some spice
• Activate/deactivate
animation
• More interesting styling
• No additional JavaScript

26. Sample Code: Line Graph +
Our first Canvas example was pretty boring
• Canvas still draws the
graph
• CSS adds some spice
• Activate/deactivate
animation
• More interesting styling
• No additional JavaScript

27. Mix and Match for the Win
Feature CSS Canvas
Text Styling ✔
2D Drawing Primitives ✔
Sprite Animation ✔ ✔
Generated Gradients ✔
Image Transformations ✔ ✔
“Set it and forget it” Animation ✔
Synchronized Animation ✔
Layered transitions ✔
Layered transformations ✔

28. Mix and Match for the Win
Dipping into both Canvas and CSS techniques
Feature CSS Canvas
Text Styling ✔
2D Drawing Primitives ✔
Sprite Animation ✔ ✔
Generated Gradients ✔
Image Transformations ✔ ✔
“Set it and forget it” Animation ✔
Synchronized Animation ✔
Layered transitions ✔
Layered transformations ✔

29. Layering Example: Poker Drops
A quick peek at this game currently in testing
• CSS3 Animations
• Menu and UI transitions
• Dealing cards
• Rotating the game board to
match device orientation
• Custom scroller widget
with basic physics
• Canvas
• Drawing the path between
poker cards
• Game timer

30. Layering Example: Poker Drops
A quick peek at this game currently in testing
• CSS3 Animations
• Menu and UI transitions
• Dealing cards
• Rotating the game board to
match device orientation
• Custom scroller widget
with basic physics
• Canvas
• Drawing the path between
poker cards
• Game timer

31. Trickery

32. JavaScript Performance Efficiencies
Boils down to taking all unnecessary computation out of
loops
• Pre-compute everything
• Make the native code do more work by using
CSS3, built-in array operations and other goodies
wherever possible
• Reduce garbage collection impact by re-using
objects instead of tossing them

33. Trickery: Examples
Taking a second look at some of the goodness in the
examples
• Graph
• Simple array-in, graph-out structure
• Fancy transitions done with CSS3
• Screensaver Pull up graph example, walk
thru use of CSS to offload the
• CSS3 does all the heavy lifting goodies, and simple array
processing
• Our timer loop does very little
• Our “random” animation paths are built from pre-
computed data

34. The Future

35. What We Can Look Forward To
Palm is on board—here’s hoping for speedy implementation
• More complete CSS3 implementation
• More complete Canvas implementation
• Hardware accelerated CSS!
• Canvas 3D
• WebGL
• 3D Transformations in CSS3

36. Q &A

37. More Information
Dave Balmer, Gobico Games
@balmer
dave@gobico.com
http://gobico.com
Good CSS and HTML5 Walkthroughs
http://css3.info
http://diveintohtml5.org
“Far Out Fowl” Canvas Game Development Tutorial
http://bit.ly/cdfuQb