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

1. HTML5 canvas
OPENING UP NEW GRAPHICAL POSSIBILITIES
Patrick H. Lauke / Developer Relations' HTML5 & CSS3 session / Oslo / 23 February 2010

2. canvas = “scriptable images”
First implemented by Apple
for OS X Dashboard widgets
Now formally part of HTML5

3. <canvas width="…" height="…"></canvas>

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. canvas mixing things up with external graphics
ctx = canvas.drawImage(…);

6. krazy canvas demos…

7. why canvas is so exciting...

8. bad news: there's no IDE (yet)

9. good news: no need for IDE
(if you know what you're doing)

11. good news: no plugins

17. also works in widgets
(depending on Widget Manager)

18. will canvas replace Flash?

19. not a question of replacing …
it gives authors options other than Flash
(particularly on platforms where Flash is absent)

20. current stumbling blocks:
slow performance – but getting better with
faster JavaScript and rendering engines

21. www.opera.com/developer
patrick.lauke@opera.com