Uploaded byKatja Hollaar
html5 Canvas element
The canvas element allows dynamic, scriptable rendering of graphs and visuals directly onto the page without plugins. It provides an API for drawing shapes, text, images and video onto a bitmap canvas. The canvas API can be used to create animations, games, data visualizations and more. Code examples demonstrate how to load video frames into canvas and respond to user clicks on the rendered frames.
html5 Canvas element
- 1.
- 2. Definition and usage Canvas: “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” (w3c specs on canvas) The canvas element is an environment for creat- ing dynamic images. Keith, J. (2010: 23). html5 for web designers Koch curve fractal based on processing.js by John Resig Canvas knowledge base application on en.inforapid.org/ Definition and usage html5 canvas API 2
- 3. History Apple invented <canvas> back in 2004 for their dashboard widgets, as a proprietary tag, and even wanted to patent it as intellectual property. http://ln.hixie.ch/?start=1089635050&count=1, Lubbers, P. et al. (2010: 25). Pro HTML5 Programming: Powerful APIs for Richer Internet Ap- plication Development Still a part of html5 specs, but specs on 2d can- Webkit clock on http://onotakehiko.com/webkitclock/ vas API are moved to a separate doc: http://dev.w3.org/html5/2dcontext/ Upcoming web standards inspired by WebKit History html5 canvas API 3
- 4. What can itbe used for? Some anticipated uses of canvas include build- ing graphs, animations, games, and image com- position. http://en.wikipedia.org/wiki/Canvas_ element#Usage Example usage: • drawing shapes, CloudKick: real-time cloud visualization on https://www. • filling colours, cloudkick.com/viz/mozilla/ • creating gradients and patterns, • rendering text, • copying images, video frames, and other canvases, • manipulating pixels, and • exporting the contents of a <canvas> to a static file. LucidChart - wireframing webapp on lucidchart.com What can it be used for? html5 canvas API 4
- 5. What can itbe used for? An entire book could be written about the use of the HTML5 Canvas API (and it wouldn’t be a small book). Lubbers, P. et al. (2010: 25). Pro HTML5 Programming: Powerful APIs for Richer Internet Ap- plication Development RectoVerso Page flip application on aneventapart.com But it’s better to watch it in ac- tion Image evolution on alteredqualia.com/visualization/evolve/ html5 canvas API 5
- 6. What can itbe used for? Canvas graphs on Rgraph vs google analytics based on flash Google maps with dynamic canvas markers html5 canvas API 6
- 7. What can itbe used for? http://www.openrise.com/lab/FlowerPower/ http://flow.momolog.info/ http://www.mrspeaker.net/dev/parcycle/ html5 canvas API 7
- 8. The code The code html5 canvas API 8
- 9. Too complicated? html5 toolkit for Dreamweaver CS5 intro vid Using Ai2Canvas plugin to create canvas directly from Illustrator Too complicated? html5 canvas API 9
- 10. Demonstration <video> & <canvas> elements brought to- gether: create dynamic “buttons” for the movie playback grabFrame() { ... var ctx = timeline.getContext(‘2d’); ctx.drawImage(filmpje, 0, 0, 848, 352, frameX, frameY, frameWidth, frame- Height); // (image, imageX, imageY, imageWidth, imageHeight, canvasX, canvasY, canvas- Width, canvasHeight) curFrame++; // update current frame ... } Demonstration html5 canvas API 10
- 11. Demonstration <video> & <canvas> elements brought to- gether: create dynamic “buttons” for the movie playback timeline.onclick = function(e) { var inputX = e.layerX - timeline.off- setLeft; // cursor’s X coordinate var inputY = e.layerY - timeline.off- setTop; // cursor’s Y coordinate var clickedFrame = Math.floor(inputY/ frameHeight) * frameRows; clickedFrame+= Math.floor(inputX/ frameWidth); // calculate which frame is clicked ... } Demonstration html5 canvas API 11
- 12. Sources • Keith, J. (2010). html5 for web designers • http://ln.hixie.ch/?start=1089635050&count=1 • Lubbers, P. et al. (2010). Pro HTML5 Programming: Powerful APIs for Richer Internet Application Devel- opment • http://dev.w3.org/html5/2dcontext/ • http://en.wikipedia.org/wiki/Canvas_ element#Usage • http://www.canvasdemos.com/ • http://diveintohtml5.org/canvas.html • http://html5doctor.com/search/?q=canvas • http://sixrevisions.com/html/canvas-element/ A simple drawing supposed to represent a spider web made with Harmony canvas app • Matthew, D. (2010). HTML5: designing rich Inter- net applications • http://www.html5trends.com/ Sources html5 canvas API 12