Canvas

Het HTML- <canvas>element wordt gebruikt om afbeeldingen op een webpagina te tekenen.

De afbeelding aan de linkerzijde is gemaakt met <canvas>. Het toont vier elementen: een rode rechthoek, een verlooprechthoek, een veelkleurige rechthoek en een veelkleurige tekst.

Wat is HTML Canvas?

Het HTML- <canvas>element wordt gebruikt om directe afbeeldingen te tekenen via JavaScript.

Het <canvas>element is slechts een container voor afbeeldingen. U moet JavaScript gebruiken om de afbeeldingen werkelijk te tekenen.

Canvas heeft verschillende methoden om paden, kaders, cirkels, tekst te tekenen en afbeeldingen toe te voegen.

Canvas voorbeelden

Een canvas is een rechthoekig gebied op een HTML-pagina. Standaard heeft een canvas geen rand en geen inhoud.

De opmaak ziet er als volgt uit:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

OPMERKING: Definieer altijd een id attribuut (zodat je het in javascript kunt gebruiken), en een widthen heightattribuut om de grootte van het canvas te definiëren. Gebruik evt. het styleattribuut om een ​​rand toe te voegen.

Tekenen

Nadat je het canvas hebt gemaakt, kun je JavaScript gebruiken om een tekening te maken.

Voorbeeld:
Het volgende voorbeeld voegt een lijn toe:

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

Voorbeeld:
Het volgende voorbeeld voegt een cirkel toe:

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

Voorbeeld:
Het volgende voorbeeld voegt tekst toe:

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

Meer informatie over de beschikbare functies kun je hier vinden: https://www.w3schools.com/graphics/canvas_reference.asp

Met canvas is het bijvoorbeeld mogelijk om een analoge klok te maken, hier vind je een korte cursus hoe je dat doet: https://www.w3schools.com/graphics/canvas_clock.asp