Standards.Next:Standards.Next:HTML5 CanvasHTML5 Canvas

Martin Kliehm @kliehmMartin Kliehm @kliehmSenior Frontend Engineer. Senior Frontend Engineer. Namics.Namics. Photo: Spencer Eakin

http://www.flickr.com/photos/true2death/244309118/

What’s a canvas?

For IE: excanvas.js (limited)(Google) Gears

http://philip.html5.org/tests/canvas/suite/tests/results.htmlhttp://philip.html5.org/tests/canvas/suite/tests/results.html

http://flickr.com/photos/tais/2411643409/

You can draw on it.

Boring.

Better.

You can put photos on it.

<canvas id="canvas" width="500" height="350"> <img src="fallback.jpg" width="500" height="350" alt="Pulp Fiction Minifigs" /></canvas>

http://www.flickr.com/photos/minifig/72091618/

<script type="text/javascript"> var canvas = document.getElementById( 'canvas' ); if ( canvas.getContext ) { var ctx = canvas.getContext( '2d' ); ctx.drawImage( img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight ); }</script>

http://flickr.com/photos/tais/2411643409/http://flickr.com/photos/energeticspell/2332820792/

You can do creative things with a canvas.

var canvas = document.getElementById('canvas');

if ( canvas.getContext ) { // Get the image object var img = document.images[0];

// Set canvas 2D context

var ctx = canvas.getContext( '2d' );

/* Draw image: drawImage( * image object, sx, sy, sWidth,

sHeight, * dx, dy, dWidth, dHeight) */

ctx.drawImage( img, 0, 0, img.width, img.height, 0, 0, img.width, img.height );

// Save current state ctx.save();

[...]

[...]

// Draw mirror image

// Restore saved state ctx.restore();

// Flip vertically: scale(x,y) ctx.scale( 1, -1 );

// Move beneath the original image ctx.translate( 0, -img.height );

// Draw mirror image ctx.drawImage(

img, 0, 0, img.width, img.height, 0, -img.height, img.width, img.height );

[...]

[...]

// Drawing the fading gradient // Restore saved state ctx.restore();

// Flip vertically: scale(x,y) ctx.scale( 1, -1 );

// Draw gradient var mirrorHeight = img.height * 0.5;

var gradient = ctx.createLinearGradient( 0, 0, 0, mirrorHeight );

gradient.addColorStop( 0, 'rgba( 0, 0, 0, 0.5 )' );

gradient.addColorStop( 1, 'rgba( 0, 0, 0, 1.0 )' );

// Fill rectangle with gradient

ctx.fillStyle = gradient;

ctx.rect( 0, 0, img.width, mirrorHeight );

ctx.fill();

}

You can distort it.

/* transform( * scaleX, skewY, skewX, scaleY, * translateX, translateY ) */

ctx.transform( 1, Math.PI * 2 / 18, 0, 1, 0, 0 );

What’s a canvas, really?

“It’s like havinga little Apple ][in your browser.”http://www.oblomovka.com/wp/2008/08/08/the-edge-at-sxsw/http://www.oblomovka.com/wp/2008/08/08/the-edge-at-sxsw/

css3-safari-coverflow-pbakaus.avihttp://paulbakaus.com/2008/05/31/coverflow-anyone/

http://hacks.mozilla.org/2009/06/3d-transforms-isocube/http://hacks.mozilla.org/2009/06/3d-transforms-isocube/

http://radnan.public.iastate.edu/plotr/http://www.500null.com/?p=16

Manipulation.

http://www.ernestdelgado.com/archive/drag-and-drop-without-drag-and-drop/http://www.ernestdelgado.com/archive/drag-and-drop-without-drag-and-drop/

http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.htmlhttp://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html

http://www.bluishcoder.co.nz/2008/09/javascript-space-invaders-emulator.html

Text.

http://myles.eftos.id.au/experiments/font_render.html

https://developer.mozilla.org/En/Drawing_text_using_a_canvas

http://www.cameronmoll.com/articles/cufon/http://cufon.shoqolate.com/generate/

http://bespin.mozilla.com

http://www.flickr.com/photos/tussenpozen/144712446/in/set-560609/http://www.paciellogroup.com/blog/?p=362http://esw.w3.org/topic/HTML/AddedElementCanvas

http://www.codeplex.com/MsaaVerify

Filters.

http://labs.pimsworld.org/2009/05/a-javascript-implementation-of-the-content-aware-image-resizing-algorithm/

Applications.

Applications.

http://openstreetmap.orghttp://ernestdelgado.com/public-tests/ canvas-gpsmap/

http://www.ernestdelgado.com/gmaps/canvas/ddemo1.html

http://www.borismus.com/canvas-vs-svg-performance/http://groups.google.com/group/Google-Maps-API/msg/3599cee1f7190e30

3D Canvas.

!=

Slices

http://yuiblog.com/blog/2008/06/23/slicing/

http://flickr.com/photos/jerizm/2602242647/

http://www.blarnee.com/projects/cflow/http://www.ernestdelgado.com/archive/chromeflow/

http://aggpas.org/aggpas-demo.htmhttp://www.lomont.org/Math/Papers/2003/InvSqrt.pdf

http://en.wikipedia.org/wiki/Texture_mapping

http://blog.nihilogic.dk/2008/04/javascript-wolfenstein-3d.html

http://www.flipcode.com/archives/3D_Graphics_on_Mobile_Devices-Part_3_Polygon_Graphics.shtml

jsgl.js

/* Apply the affine 3x4 matrix transform to point |p|. |p| should

* be a 3 element array, and |t| should be a 16 element array...

* Technically transformations should be a 4x4 matrix for

* homogeneous coordinates, but we're not currently using the

* extra abilities so we can keep things cheaper by avoiding the

* extra row of calculations.

*/

function applyRotation( t, p ) {

return {

x: t.e0 * p.x + t.e4 * p.y + t.e8 * p.z,

y: t.e1 * p.x + t.e5 * p.y + t.e9 * p.z,

z: t.e2 * p.x + t.e6 * p.y + t.e10 * p.z

};

}

Matrix Math.

http://lbi.lostboys.nl/blog/artikelen/canvas-in-full-3d/

http://tulrich.com/geekstuff/canvas/perspective.html

The future: real 3D.

http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension

http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimensionhttps://wiki.mozilla.org/Canvas:3D

http://blog.largeanimal.com/demo/http://www.youtube.com/watch?v=uofWfXOzX-g

http://code.google.com/apis/o3d/

Video.

https://developer.mozilla.org/samples/video/chroma-key/index.xhtml (Firefox 3.5 required)

http://people.opera.com/howcome/2007/video/svg/video-filter.svg (special version of Opera 9.5 required)

http://www.youtube.com/watch?v=ib_g7F6WKAA

http://labs.opera.com/news/2009/04/01/

Thank you.

twitter: @kliehmLinks: delicious.com/kliehm/standardsnextVideos: flic.kr/p/6AeoAT