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