Embed Size (px)
DESCRIPTION
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.
Citation preview
Html5 CanvasHtml5 CanvasWhat? Where? When?
• Loaders / Splash Screens
• Games, full screen apps
• Light Boxes
• Responsive layouts, only show on big screens
• Demos ;)
Use CasesUse Cases
Canvas Text APICanvas Text APIThe Definitive guide
That’s itThat’s itDemo time?!
FormattingFormatting• Nope
• Nope
• Multiline
• Kerning
…but this is probably a good thing.
TransformsTransforms• rotate(radian)
• translate(x , y)
• scale(x, y)
• setTransform(xScale, xSkew, ySkew, yScale, x ,y )
Animating blocksAnimating blocks
PerformancePerformanceHow many particles?
BitmapsBitmaps• drawImage()
• getImageData()
• putImageData()
• toDataURL()
Text Height?Text Height?
Marching SquaresMarching Squares
Circular WanderCircular Wander
Snow manSnow man
Circular Wander TextCircular Wander Text
Codepen.ioCodepen.io
Codepen.io/sakriCodepen.io/sakri
