Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca OVERVIEW Presented live at FITC Amsterdam 2014 on Feb 24-25, 2014 More details can be found at www.FITC.ca Sakri has put together a collection of what can be done with text on the HTML5 Canvas using JavaScript. Drawing from nearly 15 years of coding visual effects, the bag of tricks is heavy. This session will start with the basics and move on with increasing complexity; each demo will be accompanied with key concepts, snippets of code and ideas for further exploration. To avoid any confusion or prerequisites, the demos are all built from scratch with minimal use of external libraries or frameworks. While the talk is centered around text effects, the techniques presented are certainly applicable outside the world of text effects and Canvas.

2. Html5 Canvas
What? Where? When?

3. Use Cases
• Loaders / Splash Screens
• Games, full screen apps
• Light Boxes
• Responsive layouts, only show on big screens
• Demos ;)

4. Canvas Text API
The Definitive guide

6. That’s it
Demo time?!

7. Formatting
• Multiline
• Nope
• Kerning
• Nope
…but this is probably a good thing.

8. Transforms
• rotate(radian)
• translate(x , y)
• scale(x, y)
• setTransform(xScale, xSkew, ySkew, yScale, x ,y )

9. Animating blocks

10. Performance
How many particles?

13. Bitmaps
• drawImage()
• getImageData()
• putImageData()
• toDataURL()

15. Text Height?

16. Marching Squares

17. Circular Wander

18. Snow man

19. Circular Wander Text

21. Codepen.io

22. Codepen.io/sakri