Your SlideShare is downloading. ×
  • Like
  • Save
html5 Canvas element
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

html5 Canvas element

  • 1,712 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,712
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. html5canvas elementAPI
  • 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. 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. 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. 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. 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. 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. The code The codehtml5 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 ... } Demonstrationhtml5 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 ... } Demonstrationhtml5 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/ Sourceshtml5 canvas API 12