HTML5 canvas

HTML5 canvas

• 1.
  HTML5 canvas OPENING UPNEW GRAPHICAL POSSIBILITIES Patrick H. Lauke / Developer Relations' HTML5 & CSS3 session / Oslo / 23 February 2010
• 2.
  canvas = “scriptableimages” First implemented by Apple for OS X Dashboard widgets Now formally part of HTML5
• 3.
  <canvas width="…" height="…"></canvas>
• 4.
  canvas has standardAPI 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 thingsup with external graphics ctx = canvas.drawImage(…);
• 6.
  krazy canvas demos…
• 7.
  why canvas isso exciting...
• 8.
  bad news: there'sno IDE (yet)
• 9.
  good news: noneed for IDE (if you know what you're doing)
• 11.
  good news: noplugins
• 17.
  also works inwidgets (depending on Widget Manager)
• 18.
  will canvas replaceFlash?
• 19.
  not a questionof replacing … it gives authors options other than Flash (particularly on platforms where Flash is absent)
• 20.
  current stumbling blocks: slowperformance – but getting better with faster JavaScript and rendering engines
• 21.
  www.opera.com/developer patrick.lauke@opera.com