Successfully reported this slideshow.
Your SlideShare is downloading. ×

All Text Tricks in the Book, with JavaScript and Canvas

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 23 Ad

All Text Tricks in the Book, with JavaScript and Canvas

Download to read offline

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.

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.

Advertisement
Advertisement

More Related Content

Viewers also liked (19)

More from FITC (20)

Advertisement

Recently uploaded (20)

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

×