En af de varmeste nyheder i den kommende udgave af webstandarden, HTML5, er canvas-elementet, som gør det muligt at tegne i browseren fra Javascript.
Med Internet Explorer 9 er alle de nye browsere med på canvas-vognen, og dermed bliver teknologien en alvorlig konkurrent til Flash og andre plugins, som ofte tidligere var nødvendige for at skabe interaktiv animeret 2D-grafik.
Canvas er simpelthen et rektangulært element på en webside, ligesom et div-element eller tilsvarende, men med den store forskel, at man kan tegne programmatisk fra Javascript i feltet. I Internet Explorer 9 sker det med grafikacceleration, og det samme er på vej i Firefox og Chrome, og det giver flotte og højtydende animationer.
For at tegne i et canvas-felt skal man hente et context-objekt fra DOM'en, som vist i kodeeksempel 1:
I linje 1 angives dokument-typen for HTML5, hvilket Internet Explorer 9 kræver for at genkende dokumentet som HTML5.
I linje 5 defineres canvas-feltet med id'et 'canvasfelt' og en bredde og højde på 500 gange 300 pixels.
I linje 7 fås canvas-objektet fra DOM'en på sædvanlig vis. Canvas-objektet har en getContext-metode, som skal kaldes med strengen '2D' (Der er ingen 3D-kontekst endnu, men det kan komme senere). Metoden returnerer et context-objekt, som er tegnepladen, på samme måde, som det kendes fra f.eks. Javas 2D-API.
I linje 9 og 10 anvender vi nogle af de tegnemetoder, som context-objektet kan byde på. Koordinaterne angiver som sædvanlig i computergrafik afstanden fra øverste venstre hjørne i canvas-feltet. Resultatet kan ses i figur 1:
Tegnemetoderne i canvas minder meget om dem, man finder i andre 2d-programmeringsmiljøer, så der skulle ikke være nogen uhyggelige overraskelser i farvandet.
Man er ikke begrænset til, hvad der kan tegnes med streger og polygoner. Det er også muligt at importere billedfiler ind i canvasset. Det benyttes i Coulisse (figur 2), som er en HTML5-udgave af Itunes kendte coverflow-widget. Her bruges canvas-metoder til at udføre en transformation af billeder:
Med Internet Explorer 9 benytter alle de store browsere nu den samme event-model, der går under navnet DOM Level 3 events. Det betyder, at det er væsentligt simplere at have at gøre med events.
Kodeeksempel 2 viser, hvorledes et musekliks relative koordinater i forhold til canvas-objektets øverste venstre hjørne nemt kan findes. Og så er det bare med at komme i gang med at programmere HTML5-baserede spil.
