Html5 Canvas
What? Where? When?
Use Cases
• Loaders / Splash Screens

• Games, full screen apps
• Light Boxes
• Responsive layouts, only show on big scree...
Canvas Text API
The Definitive guide
That’s it
Demo time?!
Formatting
• Multiline

• Nope

• Kerning

• Nope

…but this is probably a good thing.
Transforms
• rotate(radian)

• translate(x , y)
• scale(x, y)
• setTransform(xScale, xSkew, ySkew, yScale, x ,y )
Animating blocks
Performance
How many particles?
Bitmaps
• drawImage()
• getImageData()

• putImageData()
• toDataURL()
Text Height?
Marching Squares
Circular Wander
Snow man
Circular Wander Text
Codepen.io
Codepen.io/sakri
 All Text Tricks in the Book, with JavaScript and Canvas
 All Text Tricks in the Book, with JavaScript and Canvas
 All Text Tricks in the Book, with JavaScript and Canvas
 All Text Tricks in the Book, with JavaScript and Canvas
 All Text Tricks in the Book, with JavaScript and Canvas
 All Text Tricks in the Book, with JavaScript and Canvas
 All Text Tricks in the Book, with JavaScript and Canvas
Upcoming SlideShare
Loading in...5
×

All Text Tricks in the Book, with JavaScript and Canvas

1,476

Published on


All Text Tricks in the Book, with JavaScript and Canvas
with Sakri Rosenstrom

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,476
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

All Text Tricks in the Book, with JavaScript and Canvas

  1. 1. Html5 Canvas What? Where? When?
  2. 2. Use Cases • Loaders / Splash Screens • Games, full screen apps • Light Boxes • Responsive layouts, only show on big screens • Demos ;)
  3. 3. Canvas Text API The Definitive guide
  4. 4. That’s it Demo time?!
  5. 5. Formatting • Multiline • Nope • Kerning • Nope …but this is probably a good thing.
  6. 6. Transforms • rotate(radian) • translate(x , y) • scale(x, y) • setTransform(xScale, xSkew, ySkew, yScale, x ,y )
  7. 7. Animating blocks
  8. 8. Performance How many particles?
  9. 9. Bitmaps • drawImage() • getImageData() • putImageData() • toDataURL()
  10. 10. Text Height?
  11. 11. Marching Squares
  12. 12. Circular Wander
  13. 13. Snow man
  14. 14. Circular Wander Text
  15. 15. Codepen.io
  16. 16. Codepen.io/sakri
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×