An Introduction to HTML5 Canvas

An Introduction to HTML5 CanvasJohn Bristowe (@jbristowe)

HTML5

SEMANTICS CONNECTIVITY 3D, GRAPHICS& EFFECTS

OFFLINE& STORAGE

DEVICE ACCESS MULTIMEDIA PERFORMANCE& INTEGRATION

CSS3

HTML5 Canvas

History

Introduced by Apple in Safari

Met with Mixed Reactions

Supported and Welcomed by All

Browser Support

So, what is HTML5 Canvas?

Dynamic, Scriptable Rendering of 2D Shapes and Bitmaps

Immediate Mode Graphics

Simple API45 Methods and 21 Attributes

State Compositing Colours and Styles

Line Styles Shadows Simple Shapes

Complex Shapes

Focus Management Text

Images Pixel Manipulation

Jazz Hands and Demo Time!

HTML5 Canvas or SVG?

SVG and Canvas Spectrum

Some Conventions and Tips

Resources

Make Awesome Webmakeawesomeweb.com

IE Test Driveietestdrive.com

IE on MSDNmsdn.com/ie

Canvas Demoscanvasdemos.com

HTML5 Rockshtml5rocks.com

Dev.Operadev.opera.com

Web O’ Wonderdemos.mozilla.org

Kenny Louie (@kennymatic)

Questions?

Thanks!