Standards.Next: Canvas

Standards.Next: HTML5 Canvas Martin Kliehm @kliehm Senior Frontend Engineer. Photo: Spencer Eakin Namics. 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.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/

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

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 having a little Apple ][ in your http://www.oblomovka.com/wp/2008/08/08/the-edge-at-sxsw/ browser.”

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

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/public-tests/canvasphoto/demo/canvas.html

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

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

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

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

http://bespin.mozilla.com

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

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.org http://ernestdelgado.com/public-tests/ canvas-gpsmap/

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

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.htm http://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

Matrix Math. 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 };

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-dimension https://wiki.mozilla.org/Canvas:3D

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

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: @kliehm Links: delicious.com/kliehm/standardsnext Videos: flic.kr/p/6AeoAT

http://www.netsetters.nl	2454
http://www.slideshare.net	79
http://karinchristen.ch	36
http://www.felgner.ch	34
http://lanyrd.com	12
http://livecarnation.jp	3
http://static.slidesharecdn.com	2
https://lanyrd.com	1
http://blog.namics.com	1
http://mlourens.blogspot.nl	1

Standards.Next: Canvas

by Martin Kliehm

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 2,623

Statistics