html5 canvas

HTML5 canvas

Patrick H. Lauke / Developer Relations' HTML5 & CSS3 session / Oslo / 23 February 2010

OPENING UP NEW GRAPHICAL POSSIBILITIES

canvas = “scriptable images”

First implemented by Applefor OS X Dashboard widgets

Now formally part of HTML5

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

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

canvas mixing things up with external graphics

ctx = canvas.drawImage(…);

krazy canvas demos…

why canvas is so exciting...

bad news: there's no IDE (yet)

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

good news: no plugins

also works in widgets(depending on Widget Manager)

will canvas replace Flash?

not a question of replacing …

it gives authors options other than Flash(particularly on platforms where Flash is absent)

current stumbling blocks:

slow performance – but getting better with faster JavaScript and rendering engines

www.opera.com/developerpatrick.lauke@opera.com