Workshop HTML5 Canvas: deel 1, tekenen op het canvas
Met HTML5 komen er veel nieuwe mogelijkheden bij voor webapplicaties, zowel voor als achter de schermen. Hierbij valt te denken aan lokale dataopslag, sterk verbeterde communicatiemogelijkheden, locatie bewuste applicaties, CSS3 en zo zijn er nog veel meer te noemen. Eén onderdeel wil ik er graag uitlichten en dat is de mogelijkheid om video’s en animaties te tonen. Naast het Video Element uit mijn vorige blogs, speelt het Canvas Element hierin een belangrijke rol. Met HTML5 komen er veel nieuwe mogelijkheden bij voor webapplicaties, zowel voor als achter de schermen. Hierbij valt te denken aan lokale dataopslag, sterk verbeterde communicatiemogelijkheden, locatie bewuste applicaties, CSS3 en zo zijn er nog veel meer te noemen. Eén onderdeel wil ik er graag uitlichten en dat is de mogelijkheid om video’s en animaties te tonen. Naast het Video Element uit mijn vorige blogs, speelt het Canvas Element hierin een belangrijke rol. Het HTML5 Canvas Het Canvas laat zich het best omschrijven als een “scriptable bitmap”. Met andere woorden: we gaan met Javascript tekenen en animeren.Het feit dat het Canvas gebruikt kan worden zonder het installeren van plug-ins maakt het in de toekomst zeker een erg belangrijk onderdeel van HTML5. Niet alle gebruikers hebben plug-ins geïnstalleerd zoals Flash en Silverlight en op sommige platforms -denk aan iPhone en iPad- zijn deze plugins niet eens beschikbaar. Maar waarschijnlijk wil je ook voor deze groep je webapplicatie bruikbaar en aantrekkelijk maken. Eerlijk is eerlijk, HTML5 heeft op dit moment ook nog geen 100% dekking, maar het is wel duidelijk dat alle ontwikkelingen die kant op gaan. Daarnaast heeft Microsoft bij de eerste preview van Windows 8 aangegeven dat HTML5 ook op de desktop een prominente rol zal gaan innemen. Dus “Get ready for HTML5” en in dit geval: klaar voor de toekomst met het HTML Canvas. Het Canvas element Het Canvas element zelf doet eigenlijk niet zo veel. Je kunt het het beste zien als een leeg stuk papier. Als attributen geef je de breedte en hoogte op en in het element specificeer je de content die gebruikers te zien krijgen wanneer ze een browser gebruiken die het Canvas element niet ondersteunt. Dit kan een simple melding of afbeelding zijn, maar ook een vervangende Flash- of Silverlight-applicatie. Het tekenen op het Canvas gebeurt door middel van Javascript. Het Canvas heeft twee belangrijke eigenschappen. Ten eerste is het een Bitmap, dit in tegenstelling tot Flash en Silverlight. We werken dus met pixels en niet met vectoren. Ten tweede werkt het als “fire and forget”. Oftewel: wanneer er iets op het Canvas wordt getekend, dan wordt dat niet bij gehouden in een DOM. Het is dus niet mogelijk om een bepaald getekend object later weer aan te spreken. Dit lijkt erg onhandig, maar zorgt er wel voor dat het Canvas erg snel is. Er wordt namelijk geen collectie van objecten bijgehouden en daardoor kan er in een hoog tempo getekend worden. Tekenen op het Canvas Aangezien het Canvas vanuit Javascript bewerkt gaat worden is het wel verstandig om in Javascript een check uit te voeren of de browser ook ondersteuning biedt hiervoor. Dit om Javascript errors te voorkomen. function supports_canvas– { return !!document.createElement-‘canvas’-.getContext; } De 2 uitroeptekens worden gebruikt om alle waardes zoals “null”, “undefined”, “false”, “” en “0” als negative boolean terug te krijgen. De waarde True krijgen we terug als er een object -in dit geval Canvas Context- bestaat. De dubbele uitroeptekens zijn ook in andere situaties te gebruiken en noemen we ook wel de “double negative trick”. Eventueel zijn er ook open-source javascript libraries die diverse HTML5 checks kunnen uitvoeren, zoals Modernizr. We beginnen met het opzoeken van het Canvas element op de pagina. Vervolgens vragen we de “2d” context op. Dit roept natuurlijk de vraag op, of er ook een “3d” of andere context is. Maar dat is niet het geval. Tenminste, nu niet. Het is wel aannemelijk dat dit ooit zal gaan komen. var canv = document.getElementById-‘voorbeeld’-; var ctx = canv.getContext-‘2d’-; Het Context object bevat alle tekenfunctionaliteit. Zo is het mogelijk om lijnen, bogen, vierkanten, vlakken en teksten te tekenen. // blauwe lijn ctx.beginPath–; ctx.lineWidth = 20; ctx.moveTo-10,10-; // ga naar het start punt ctx.lineTo-10,200-; ctx.lineTo-100, 100-; ctx.bezierCurveTo-400, 200, 200, 10, 400, 50-; ctx.lineTo-400, 200-; ctx.strokeStyle = ‘#8888ff’; ctx.stroke–; // rode rechthoek ctx.lineWidth = 10; ctx.strokeStyle = ‘#ff8844’; ctx.strokeRect-60, 20, 300, 200-; // groen vierkant -> met 50% alpha -transparant- ctx.fillStyle = ‘rgba-150, 255, 100, 0.5-‘; ctx.fillRect-200, 100, 400, 300-; // tekst ctx.fillStyle = ‘#000066;’; ctx.font = ’60px Bauhaus 93′; ctx.fillText-‘De tekst’, 0, 0, 500-; 
Zie ook: Workshop HTML5 Canvas: deel 2, de context en graphics en Workshop HTML5 Canvas: deel 3, animatie en interactie.