HTML5 CanvasHere there be cool stuff!

27 / 04 / 2010

www.supermondays.org/ www.byrichardpowell.co.uk

@byrichardpowell

What is Canvas ?

2d drawing platform

HTML5

JavaScript

<canvas width=“20" height=“20“></canvas>

var context = canvas.getContext( '2d' );context.clearRect(0,0, 100, 100);

byrichardpowell.co.uk @byrichardpowell

What is Canvas For?• Data Visualisation• Dynamic Animation & Games• Complex interaction, UI’s & applications• Plugging gaps in browser support• Pseudo 3D & 3D ‘Proper’ with WebGL• Integration with other HTML5 technologies• Think Big & Have Fun!

byrichardpowell.co.uk @byrichardpowell

The Bad News?

SVG: http://mzl.la/svg_introExplorer Canvas: http://bit.ly/ex-canvas

byrichardpowell.co.uk @byrichardpowell

Canvas in the wild

Weaves Silk:

http://bit.ly/silk-canvas

Radiohead:

http://www.radiohead.com/

Cufon:

http://bit.ly/cufon-canvas

Sinuous:

http://bit.ly/sinuous-canvas

Biolab Disater:

http://bit.ly/biolab-canvas

Wildernessdowntown:

http://bit.ly/wilderness-canvas

byrichardpowell.co.uk @byrichardpowell

Animating some particlesrun loop 25 times a second

loop {

// Clear the last frame

draw a white box over the screen

// Create a new particle

create new particle with random x & y velocity with x & y positions of 0

add the new particle to the particles array

// Be Kind to the computer

if there are more than 250 particles in the array delete the first one

// Update each particle

for each particle in particles array {

// Simulate Bounce, velocity, gravity & drag

if the particle is past screens edges reverse its x + y velocity

add x & y velocity to x & y position

reduce y velocity to simulate gravity

reduce x & y velocity to simulate drag

// Render the particle

render the particle using its x & y position

}

}

byrichardpowell.co.uk @byrichardpowell

Can I have Libraries?

• Three.js: http://bit.ly/three-canvas• Raphael: http://bit.ly/raphael-canvas• ZingChart: http://bit.ly/zing-canvas• Peity: http://bit.ly/peity-canvas• Processing.js: http://bit.ly/processing-canvas• Easel: http://bit.ly/easel_canvas

byrichardpowell.co.uk @byrichardpowell

Resources

Follow@seb_ly, @mrdoob, @robhawkes

Visit http://bit.ly/bundles/byrichardpowell/3 http://byrichardpowell.co.uk

ReadFoundation Canvas: http://amzn.to/foundation-canvas

Get In Touch@byrichardpowell, richardo@gmail.com

byrichardpowell.co.uk @byrichardpowell