corehtml5canvas

Boekbespreking: Core HTML5 Canvas

De gebruikelijke talen waar een website zich van kan bedienen, te weten html, css en javascript, laten soms grafisch wat te wensen over. Al snel ben je aan het goochelen met <div> elementen en zoek je naar oplossingen voor problemen die eigenlijk onnodig lijken te zijn, maar slechts het resultaat zijn van het feit dat webpagina’s aanvankelijk niet gemaakt zijn met een geavanceerde grafische interface in gedachten. Daar is sinds een aantal jaar een oplossing voor: het html5 <canvas> element. Maar wat kun je met dit element? Dat wordt in het boek core html5 canvas van David Geary uitgebreid besproken.

Meer dan een element

Dat het <canvas> element bestaat is natuurlijk mooi, maar wat is het? Het is in wezen een ruimte die je op je pagina reserveert, waar je vervolgens grafische bewerkingen op kunt loslaten. Klinkt dat bekend? Dat zou best eens kunnen, want het doet wat dit betreft wel sterk denken aan Adobe Flash applicaties. Dit element is echter wel binnen de html code zelf te besturen, namelijk met JavaScript. In wezen maak je een verwijzing naar dit element, waarna je met die verwijzing en gerelateerde methoden allemaal dingen er mee kunt uithalen. Eigenlijk gebruik je hier JavaScript het meest voor. Dat roept alle functionaliteit van het element aan, maar het rekent eigenlijk ook alle waarden uit die uiteindelijk op het scherm kunnen worden getoond.

Het boek legt dit stap voor stap uit. Waarschijnlijk zijn veel webbouwers al langer op zoek naar manieren om eenvoudig grafieken te kunnen laten zien bijvoorbeeld. Dat kan met dit element. Een mooie analoge klok nabootsen? Geeb probleem. Je hoeft niet altijd met .jpeg, .gif of .png afbeeldingen te werken, je kunt ook instructies geven aan het canvas element, waarna het vanzelf getekend wordt. Simpele lijnen, rechthoeken, circels of meer gecompliceerde vormen zijn zeer eenvoudig te tekenen. Dat kan voor veel ontwikkelaars een hele verademing zijn.

Het neemt de tijd

Het boek is omvangrijk, maar eigenlijk leest het daarom heel soepel. Het staat uitgebreid stil bij alle mogelijkheden van canvas en hoe JavaScript zo is te gebruiken dat het ook van al die mogelijkheden gebruik maakt. Het begint met eenvoudige teken-toepassingen,  zoals de lijnen en circels die ik hierboven al noemde. Het gaat echter verder en laat ook zien hoe je met afbeeldingen zoals .jpeg, .gif en .png kunt werken, maar bewerkingen erop kunt loslaten die verder gaan dan wat gebruikelijk er mee mogelijk is. Manipulatie op het niveau van de pixel is met het canvas element mogelijk. Dat moet ook voor velen een verademing zijn.

Het gaat ook verder dan grafische toepassing alleen. Het laat zien hoe je met behulp van grafische methode’s gedegen interfaces kunt maken en zelfs volledige games. Dit is echter tegelijkertijd waar het een beetje tekortschiet: de game engines en de voorbeelden zijn niet geweldig en hebben nog niet veel commerciële uitstraling. Toch, ook de commercieel aantrekkelijke games kunnen wel hiermee gemaakt worden en steunen wel op alle methoden die het boek behandelt.

Een volgende stap in JavaScript

Ik kocht het boek omdat ik zelf de grenzen begon te voelen van wat ik zelf met JavaScript voor elkaar kon krijgen. Ik wilde een breed overzichtswerk om de volgende stap mee te kunnen zetten. Daar is dit boek zeer goed voor gebleken. Het doet je samenhangend stilstaan bij mogelijkheden en toepassingen van  het html5 canvas element maar brengt je ook verder in JavaScript. De implementatie van jQuery schittert in afwezigheid, maar misschien is het ook wel goed om te leren hoe je dergelijke toepassingen “kaal” kunt realiseren zonder meteen op jQuery een beroep te hoeven doen.

Geary, David M. HTML5 Canvas: Graphics, Animation and Game Development. Prentice Hall: United States, 2012.
website: corehtml5canvas.com