Canvas-taggen

Till <canvas> behövs javaScript

Målet med denna webbplats är att ge en introduktion till grundläggande HTML5, utan behov av javaScript. För att kunna använda den nya canvas-taggen är detta dock omöjligt. Canvas är en sorts målarduk som sätts upp med html (<width> och <heigth>), men för att få användning av ritområdet krävs javaScript-kod. Duken nedan har följande uppmärkning, med en ram gjord i CSS:

<canvas id="canvas1" width="397" height="150"> </canvas>

De flesta större webbläsare stödjer redan canvas, men liksom för video- och audiotaggarna kan det vara bra att än så länge lägga till en kommentar om webbläsarstöd, i den mån browsern inte kan visa canvas-koden.

Rita något på canvas-duken

Går det då att rita något direkt på canvas-duken? Nja, som du kanske märkte ovan så gör det inte det. Däremot kan man, med hjälp av canvas och javaScript, utveckla applikationer som gör att man kan både rita, skriva och färglägga direkt på canvasen. Se t.ex Create a Drawing App with HTML5 and JavaScript av William Malone.

För närmare genomgång av javaScript-kod för att skapa bilder med canvas hänvisar jag till externa resurser, t.ex www.html5canvastutorials.com. Här ett eget försök till att göra något med canvas:

Varför ser smiley-gubben sur ut? Helt enkelt därför att det är mödosamt att rita på canvas. Att få till en glad mun var svårt. Nedan ser du den script-kod som behövdes för gubben.


                        		var smiley = document.getElementById('canvas2');

								var context = smiley.getContext('2d');

								

								context.strokeStyle = "#000000";

								context.fillStyle = "#FFFF00";

								context.beginPath();

								context.arc(200,75,60,0,Math.PI*2,true);

								context.closePath();

								context.stroke();

								context.fill();

								context.arc(200,75,60,0,Math.PI*2,true);

								
								context.fillStyle = "#000";

								context.beginPath();

								context.arc(180,50,5,0,Math.PI*2,true);

								context.arc(220,50,5,0,Math.PI*2,true);

								context.closePath();

								context.fill();


								
								context.beginPath();

								context.moveTo(170,100);

								context.lineTo(230,100);

								context.closePath();

								context.stroke();

Det är med andra ord betydligt lättare att lägga in en vanlig bild med img-taggen eller som background-image.

Canvas-elementet har fått sitt namn från det engelska ordet för målarduk.

Vad ska det vara bra för? Om nyttan med canvas-taggen

Nu ska vi göra canvas interaktiv, för att illustrera att man kan använda canvas till annat än stillbilder. Klicka på canvasduken nedan:

OK, det är han igen. Klicka bort gubben genom att släcka ner. Släck ner

Fördelen för större applikationer är att man inte behöver använda Flash och att det går snabbare att ladda filerna. Här ett mer avancerat exempel, gjort av Eric Rowell på www.html5canvastutorials.com. Jag har modifierat exemplet för att passa denna sida.

Som du märker är det fortfarande inte särskilt nyttiga funktioner, och inget som inte hade kunnat göras på ett enklare sätt. Jämför med följande:

Klicka

Här har jag helt enkelt länkat in en vanlig jpg-bild i en div med svart ram. Bilden är från början osynlig (display:none i CSS-filen), därefter hämtas bilden genom onClick() och en javaScript-funktion.

På webben finns massor med roliga exempel på vad man kan göra med canvas: spel, interaktiva illustrationer och grafiska applikationer. För webbredaktörer som har ont om tid och endast grundläggande kunskaper i javaScript är canvas däremot mindre användbart.

På www.netzgesta.de kan du ladda upp en bild och göra ett webbaserat pussel av den. Applikationen är gjord med canvas. Dra och släpp pusselbitarna och klicka på pusslet för att aktivera tangentbordsfunktionerna:

Blanda:: Delete-tangenten
Lös pusslet:: Enter