HTML/Appendices/Overzicht elementen/canvas

Functie

Met dit element kun je onder andere tekeningen maken.

Voorbeeld

HTML-code: Een voorbeeld van het gebruik van het element canvas

<canvas id="canvas" width="400" height="400">Gebruik een browser die het html5 element canvas ondersteunt</canvas>

Zoals je ziet is er alleen het element. De tekst die je erin zet is voor het geval de gebruiker een browser gebruikt die het canvaselement niet ondersteunt. Het verdere verloop van het canvaselement is te vinden in een stukje javascriptcode.

JavaScript-code: Het javascriptgedeelte van het canvas element

<script language=”javascript” type=”text/javascript“>
// Hier wordt het canvas klaar gemaakt
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

// We gaan nu een lijn tekenen
ctx.beginPath(); 
ctx.lineWidth="2"; // Hier wordt de lijndikte bepaald
ctx.strokeStyle="green"; // We kiezen voor een groene lijn
ctx.moveTo(0,0);
ctx.lineTo(400,400);
ctx.stroke(); // Hier tekenen we de lijn
</script>