Wat is een canvas-element in HTML5?

Het <canvas>-element in HTML5 is een container voor het tekenen van grafieken met behulp van scripts (meestal JavaScript). Het stelt je in staat om dynamische visualisaties, games en animaties direct in de browser te maken zonder plugins.

Belangrijke aspecten:

• Pixel-voor-pixel tekenen: Werkt op pixelniveau en biedt volledige controle over elk element van de afbeelding.
• Gebruik van API: Interactie met <canvas> gebeurt via de rendering-API, de meest gebruikte is 2d voor tweedimensionale graphics. Er is ook webgl voor 3D.
• Leeg canvas: Het <canvas>-element zelf is slechts een container. Alle tekeningen worden programmatisch gedaan.

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

// Krijg het canvas-element
const canvas = document.getElementById('myCanvas');

// Krijg de 2D-tekencontext
const ctx = canvas.getContext('2d');

// Teken een rechthoek
ctx.fillStyle = "#FF0000"; // Opvulkleur
ctx.fillRect(0, 0, 150, 75); // x, y, breedte, hoogte

Mogelijkheden omvatten:

• Primitive vormen (lijnen, rechthoeken, cirkels, bogen)
• Tekst
• Afbeeldingen
• Gradients en patronen
• Paden (path) voor complexe figuren