HTML5 canvas

3,616 views

Published on

Short presentation focussing on HTML5 canvas - how it works, why it matters. Delivered as part of an Opera-internal set of presentations by the Developer Relations team on 23 February 2010 in Oslo

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,616
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
77
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 canvas

  1. 1. HTML5 canvas OPENING UP NEW GRAPHICAL POSSIBILITIES Patrick H. Lauke / Developer Relations' HTML5 & CSS3 session / Oslo / 23 February 2010
  2. 2. canvas = “scriptable images” First implemented by Apple for OS X Dashboard widgets Now formally part of HTML5
  3. 3. <canvas width="…" height="…"></canvas>
  4. 4. canvas has standard API methods for drawing ctx = canvas.getContext("2d"); ctx.fillRect(x, y, width, height); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y); ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2); and loads of other exciting functions – if you like maths and stuff
  5. 5. canvas mixing things up with external graphics ctx = canvas.drawImage(…);
  6. 6. krazy canvas demos…
  7. 7. why canvas is so exciting...
  8. 8. bad news: there's no IDE (yet)
  9. 9. good news: no need for IDE (if you know what you're doing)
  10. 10. good news: no plugins
  11. 11. also works in widgets (depending on Widget Manager)
  12. 12. will canvas replace Flash?
  13. 13. not a question of replacing … it gives authors options other than Flash (particularly on platforms where Flash is absent)
  14. 14. current stumbling blocks: slow performance – but getting better with faster JavaScript and rendering engines
  15. 15. www.opera.com/developer patrick.lauke@opera.com

×