Canvas-handleiding

U leest de Engelstalige versie van deze inhoud, omdat er nog geen vertaling voor deze taal beschikbaar is. Help ons dit artikel te vertalen!

<canvas> is een HTML element wat gebruikt kan worden om graphics te tekenen met behulp van een script (meestal JavaScript). Op deze manier is het mogelijk om bijvoorbeeld grafieken te tekenen, foto composities te maken, of simpele (en niet simpele) animaties te maken.  De afbeeldingen op deze pagina zijn voorbeelden can <canvas> implementaties die in deze tutorial zullen worden gemaakt.

Deze tutorial beschrijft  hoe je met basis <canvas> elementen 2D graphics kunt maken. De voorbeelden op deze pagina zouden je een goed idee moeten geven van wat er mogelijk is met canvas. Ook kan je de stukjes code gebruiken om zelf te beginnen met het bouwen van je eigen content.

<canvas> werd voor het eerst geintroduceerd in Webkit van Apple voor OS X Dashboard. Sindsdien is het geimplementeerd in alle grote browsers.

Om te beginnen

Het <canvas> element gebruiken is niet heel ingewikkeld, maar het is wel nodig om de basis van HTML en JavaScript te kennen. Er zijn enkele oudere browsers die het <canvas> element nog niet ondersteunen, maar het wordt wel ondersteund in alle recente versies van de grote browsers. Het standaard formaat van een canvas is 300 px x 150 px (breedte x hoogte). Het formaat kan worden aangepast met behulp van de HTML 'height' en 'width' eigenschappen. Om graphics te kunnen tekenen op het canvas gebruiken we een JavaScript context object.

In deze tutorial

Bekijk ook

Een boodschap aan onze bijdragers

Vanwege een ongelukkige technische fout in de week van 17 juni, 2013, zijn we de geschiedenis van deze tutorial verloren. Inclusief alle bijdrages uit het verleden. Wij verontschuldigen ons hiervoor en hopen dat jullie deze vervelende ongeval kunnen vergeven.