All Text Tricks in the Book, with JavaScript and Canvas

43 %
57 %
Information about All Text Tricks in the Book, with JavaScript and Canvas

Published on March 7, 2014

Author: fitc_slideshare



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

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.

Html5 Canvas What? Where? When?

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

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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

All Text Tricks in the Book, with JavaScript and Canvas - FITC

Keep updated on all the latest and greatest events that FITC is involved with.
Read more

All Text Tricks in the Book, with JavaScript and Canvas - FITC

February 24-25, 2014 2014-02-24 00:00:00 2014-02-25 00:00:00 America/Toronto FITC Amsterdam 2014 Amsterdam FITC; Amsterdam
Read more

Drawing text - Web APIs | MDN - Mozilla Developer Network

Drawing text. The canvas rendering context provides two methods to render text: fillText(text, x, y [, maxWidth]) Fills a given text at the given (x,y ...
Read more

Fabric.js Javascript Canvas Library

Follow @fabricjs; Fabric.js is a ... you can create and populate objects on canvas; ... You can add text and dynamically manipulate its size, ...
Read more

html5 - canvas element - Multiple layers - Stack Overflow

... is it possible to have multiple layers in the same canvas element? ... html5 - canvas element ... HTML 5 Canvas and Javascript: ...
Read more

HTML5 Canvas Tutorials

Canvas allows you to render graphics powered by Javascript. ... Use this code to add different shadows to your canvas text. In canvas, ... All rights ...
Read more

Create a Drawing App with HTML5 Canvas and JavaScript ...

Create a Drawing App with HTML5 Canvas and JavaScript. ... Coloring books provide an outline of ... Let's mask the canvas so all drawing is within a the ...
Read more

HTML5 Canvas - W3Schools

... JavaScript, SQL, PHP, ... text, and adding images. ... To learn all about HTML , Visit our full HTML Canvas Tutorial.
Read more

HTML5 (CSS and JavaScript) Tutorials |

HTML5 (CSS and JavaScript) Tutorials. ... Styling Placeholder Text using CSS; ... SIGN-UP FOR SOME WEEKLY-ISH TIPS & TRICKS.
Read more