Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Standards.Next:
HTML5 Canvas




Martin Kliehm @kliehm
Senior Frontend Engineer.
                                         ...
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 Ficti...
<script type="text/javascript">
    var canvas = document.getElementById( 'canvas' );
    if ( canvas.getContext ) {
     ...
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 i...
[...]


     // Draw mirror image
     // Restore saved state
     ctx.restore();


// Flip vertically: scale(x,y)
    ctx...
[...]


     // Drawing the fading gradient
         // Restore saved state
         ctx.restore();
         // Flip verti...
You can distort it.
/* transform(
 * scaleX, skewY, skewX, scaleY,
 * translateX, translateY )
 */
ctx.transform( 1, Math.PI * 2 / 18,
   0, 1...
What’s a canvas, really?
“It’s like
                                                            having
                                            ...
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/tuss...
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
...
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| s...
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
Standards.Next: Canvas
Standards.Next: Canvas
Standards.Next: Canvas
Standards.Next: Canvas
Standards.Next: Canvas
Standards.Next: Canvas
Standards.Next: Canvas
Upcoming SlideShare
Loading in …5
×

Standards.Next: Canvas

21,438 views

Published on

My presentation about the HTML5 canvas element at the Standards.Next Meetup in London, 27 June 2009. Current and future implementations of canvas in games, applications, and video.

Standards.Next: Canvas

  1. Standards.Next: HTML5 Canvas Martin Kliehm @kliehm Senior Frontend Engineer. Photo: Spencer Eakin Namics. http://www.flickr.com/photos/true2death/244309118/
  2. What’s a canvas?
  3. For IE: excanvas.js (limited) (Google) Gears
  4. http://philip.html5.org/tests/canvas/suite/tests/results.html
  5. http://flickr.com/photos/tais/2411643409/
  6. You can draw on it.
  7. Boring.
  8. Better.
  9. You can put photos on it.
  10. <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/
  11. <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>
  12. http://flickr.com/photos/energeticspell/2332820792/ http://flickr.com/photos/tais/2411643409/
  13. You can do creative things with a canvas.
  14. 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(); [...]
  15. [...] // 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 ); [...]
  16. [...] // 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(); }
  17. You can distort it.
  18. /* transform( * scaleX, skewY, skewX, scaleY, * translateX, translateY ) */ ctx.transform( 1, Math.PI * 2 / 18, 0, 1, 0, 0 );
  19. What’s a canvas, really?
  20. “It’s like having a little Apple ][ in your http://www.oblomovka.com/wp/2008/08/08/the-edge-at-sxsw/ browser.”
  21. http://paulbakaus.com/2008/05/31/coverflow-anyone/ css3-safari-coverflow-pbakaus.avi
  22. http://hacks.mozilla.org/2009/06/3d-transforms-isocube/
  23. http://radnan.public.iastate.edu/plotr/ http://www.500null.com/?p=16
  24. Manipulation.
  25. http://www.ernestdelgado.com/archive/drag-and-drop-without-drag-and-drop/
  26. http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html
  27. http://www.bluishcoder.co.nz/2008/09/javascript-space-invaders-emulator.html
  28. Text.
  29. http://myles.eftos.id.au/experiments/font_render.html
  30. https://developer.mozilla.org/En/Drawing_text_using_a_canvas
  31. http://cufon.shoqolate.com/generate/ http://www.cameronmoll.com/articles/cufon/
  32. http://bespin.mozilla.com
  33. http://esw.w3.org/topic/HTML/AddedElementCanvas http://www.paciellogroup.com/blog/?p=362 http://www.flickr.com/photos/tussenpozen/144712446/in/set-560609/
  34. http://www.codeplex.com/MsaaVerify
  35. Filters. http://labs.pimsworld.org/2009/05/a-javascript-implementation-of-the-content-aware-image-resizing-algorithm/
  36. Applications.
  37. Applications. http://openstreetmap.org http://ernestdelgado.com/public-tests/ canvas-gpsmap/
  38. 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/
  39. 3D Canvas.
  40. !=
  41. Slices http://yuiblog.com/blog/2008/06/23/slicing/
  42. http://flickr.com/photos/jerizm/2602242647/
  43. http://www.blarnee.com/projects/cflow/ http://www.ernestdelgado.com/archive/chromeflow/
  44. http://aggpas.org/aggpas-demo.htm http://www.lomont.org/Math/Papers/2003/InvSqrt.pdf
  45. http://en.wikipedia.org/wiki/Texture_mapping
  46. http://blog.nihilogic.dk/2008/04/javascript-wolfenstein-3d.html
  47. http://www.flipcode.com/archives/3D_Graphics_on_Mobile_Devices-Part_3_Polygon_Graphics.shtml
  48. 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 };
  49. http://lbi.lostboys.nl/blog/artikelen/canvas-in-full-3d/
  50. http://tulrich.com/geekstuff/canvas/perspective.html
  51. The future: real 3D.
  52. http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension
  53. http://my.opera.com/timjoh/blog/2007/11/13/taking-the-canvas-to-another-dimension https://wiki.mozilla.org/Canvas:3D
  54. http://code.google.com/apis/o3d/ http://blog.largeanimal.com/demo/ http://www.youtube.com/watch?v=uofWfXOzX-g
  55. Video.
  56. https://developer.mozilla.org/samples/video/chroma-key/index.xhtml (Firefox 3.5 required)
  57. http://people.opera.com/howcome/2007/video/svg/video-filter.svg (special version of Opera 9.5 required)
  58. http://www.youtube.com/watch?v=ib_g7F6WKAA
  59. http://labs.opera.com/news/2009/04/01/
  60. Thank you. twitter: @kliehm Links: delicious.com/kliehm/standardsnext Videos: flic.kr/p/6AeoAT

×