html5 Canvas element

2,184 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,184
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

html5 Canvas element

  1. 1. html5canvas elementAPI
  2. 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 usagehtml5 canvas API 2
  3. 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 Historyhtml5 canvas API 3
  4. 4. What can it be 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. 5. What can it be 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. 6. What can it be used for? Canvas graphs on Rgraph vs google analytics based on flash Google maps with dynamic canvas markershtml5 canvas API 6
  7. 7. What can it be used for? http://www.openrise.com/lab/FlowerPower/ http://flow.momolog.info/ http://www.mrspeaker.net/dev/parcycle/html5 canvas API 7
  8. 8. The code The codehtml5 canvas API 8
  9. 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. 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 ... } Demonstrationhtml5 canvas API 10
  11. 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 ... } Demonstrationhtml5 canvas API 11
  12. 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/ Sourceshtml5 canvas API 12

×