HTML5: het Canvas element

Sketching in HTML5
Image by birdsigh via Flickr

Hoewel het allemaal nog ver weg lijkt heeft al een groot deel van de internet gebruikers de mogelijkheid tot het bekijken van websites in HTML5 en CSS3. Samen met JavaScript kunnen enorm veel toepassingen bedacht worden zonder dat er meer nodig is dan een browser. Vandaag beschrijf ik het Canvas element

Wat kan ik met de <canvas>?

  • Tekenen
  • Animeren
  • foto bewerking, positionering
  • interactie met beeld (i.c.m. javascript)

Welke browsers zijn compatibel met <canvas>?

De meeste moderne browsers ondersteunen al de algemene canvas onderdelen, 3dcanvas is voor de meeste nog een stapje te ver, maar dit zal eind 2010 door de meeste browser worden ondersteund. Een complete lijst is te vinden op canoiuse.com browser vergelijking. Er is dus geen reden om nu al niet te beginnen met HTLM5 en canvas.

Beginnen met canvas, wat heb ik nodig.

Om nu te experimenteren met canvas heb je niet veel nodig, een compatible browser (zie hierboven) en een text programma als Notepad voldoet al. Je hebt geen servers nodig omdat het lokaal draait en je hoeft niets te uploaden, plugins te installeren of software te kopen. Een gezonde kennis van (X)HTML is wel vereist.

De <canvas> tag, beginnen

De canvas tag “reserveert” een stuk in je html pagina om in te kunnen tekenen. IN onderstaand geval is deze 150 bij 150 px breed.

<canvas id="mijnCanvas" width="150" height="150"></canvas>

Door een waarde tussen de open en sluit-tag te geven, laten we de gebruiker iets zien als deze een browser heeft die canvas niet ondersteund.

<canvas id="mijnCanvas" width="150" height="150">
 Uw browser ondersteund geen canvas
</canvas>

Interactie met het canvas door middel van JavaScript

Nu kunnen we gaan tekenen op het canvas. Eerst moeten we in JavaScript het canvas aanspreken en in een variabele stoppen. Daarna geven we aan dat het gaat om een 2d canvas. De JavaScript kunnen we als functie uitvoeren op het moment dat de body, en dus ook het canvas element, geladen is.

<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('mijnCanvas');
var ctx = canvas.getContext('2d');
}
</script>
</head>
<body onload="draw();">
<canvas id="mijnCanvas" width="150" height="150">
Uw browser ondersteund geen Canvas.
</canvas>
</body>
</html>

Rechthoeken tekenen

Binnen JavaScript zijn er veel mogelijkheden om te tekenen binnen het canvas. Hieronder een voorbeeld dat gebruik maakt van:

  • fillstyle: deze geeft de inkleur instellingen mee, bijvoorbeeld de vulkleur in RGB plus de opacity  bijv. ctx.fillStyle = ”rgba(255,0,0,0.5)”; Voor een rode half-doorzichtige vulstijl.
  • fillrectangle: Dit maakt een rechthoek en vult deze met de huidige vulstijl. Meegegeven worden de coördinaten van startpunt (x,y) en de lengt in x en lengte in y, bijvoorbeeld ctx.fillRect (30, 30, 50, 50); voor een rechthoek die op 30 pixels van boven, 30 pixels van links begint en dan 5o pixels naar rechts en 50 pixels omlaag gaat.
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(200,0,0,0.5)";
ctx.fillRect (30, 30, 50, 50);
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150">
Uw browser ondersteund geen canvas
</canvas>
</body>
</html>

Klaar voor het echte werk, tekenen op je canvas

Zodra je deze basis onder de knie hebt kan je proberen meerdere vakken te maken om het grid te leren kennen. Daarna is het tijd om los te gaan tekenen. Door gebruik te maken van lijnen, line-stijlen, vul-stijlen etc kan iedere denkbare tekening gemaakt worden.  Omdat het in JavaScript wordt gegenereerd kan dit dus ook volledig dynamisch. Een mooie uitleg over de verschillende tekenvormen is te vinden op de canvas tutorial van Mozilla.

Een mooi voorbeeld vind ik de site van Cartagen, die gebruikt de xml data van Openstreetmap om een gehele kaart in canvas te tekenen. Wegens het intensieve gebruik van canvas raad ik je aan deze site te openen met Chrome of Safari.

Beeld manipulatie

Ook afbeeldingen kunnen gemanipuleerd worden in de browser met canvas. Uitsneden maken, inzoomen, kleuren, etc. Lees er meer over op de website van Mozilla.

Andere voorbeelden van canvas

Alleen te openen met compatible browsers:

Waar gaat het heen?

Het canvas element (en zeker ook het canvas 3D element) zal heel wat mogelijkheden geven. Nu al ondersteunen vele browsers en ook mobiele apparaten (Ipad, Iphone, Android smartphones) het canvas element. Dit kan het gemis van Flash op deze apparaten vaak opvangen.  Toch blijft tekenen in canvas een enorme klus en zal het even duren voordat de browsers genoeg energie hebben gestoken in het versnellen van hun JavaScript rendering.

Related articles by Zemanta
Reblog this post [with Zemanta]

Popularity: 68% [?]

Tags: , , , , , , ,

This entry was posted on Thursday, May 13th, 2010 at 10:49 pm and is filed under logic, trends. You can follow any comments to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

2 comments