html5 canvas
DESCRIPTION
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 OsloTRANSCRIPT
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/[email protected]