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

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.

  • Login to see the comments

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

×