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/

<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/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

Text.

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