Het element <canvas>

Attributen

De attributen van dit element omvatten de globale attributen.

Gebruiksopmerkingen

Alternatieve inhoud

Je zou alternatieve inhoud binnen het <canvas>-blok moeten opnemen. Die inhoud wordt weergegeven zowel in oudere browsers die canvas niet ondersteunen als in browsers waarin JavaScript is uitgeschakeld.

Sluitende </canvas>-tag

In tegenstelling tot het <img>-element vereist het <canvas>-element de sluitende tag (</canvas>).

De grootte van het canvas instellen via CSS versus HTML

De weergegeven grootte van het canvas kan worden gewijzigd met CSS, maar als je dit doet, wordt de afbeelding tijdens het renderen geschaald om aan de gestylede grootte te voldoen, wat ertoe kan leiden dat de uiteindelijke weergave vervormd raakt.

Het is beter om de afmetingen van je canvas rechtstreeks in te stellen via de attributen width en height op het <canvas>-element, hetzij rechtstreeks in de HTML, hetzij met JavaScript.

Maximale canvasgrootte

De exacte maximale grootte van een <canvas>-element hangt af van de browser en omgeving. Hoewel in de meeste gevallen de maximale afmetingen groter zijn dan 10.000 x 10.000 pixels, beperken met name iOS-apparaten de canvasgrootte tot slechts 4.096 x 4.096 pixels. Zie canvasgroottelimieten in verschillende browsers en apparaten.

Een offscreen canvas gebruiken

Een canvas kan worden gerenderd met de OffscreenCanvas-API, waarbij het document en het canvas van elkaar ontkoppeld zijn. Het voordeel is dat een workerthread het renderen van het canvas kan afhandelen, zodat de hoofdthread van je webapplicatie niet wordt geblokkeerd door canvasbewerkingen. Door het werk te parallelliseren, blijven andere UI-elementen van je webapplicatie responsief, zelfs als je complexe afbeeldingen op een offscreen canvas uitvoert. Zie voor meer informatie de documentatie van de OffscreenCanvas-API.

Toegankelijkheid

Alternatieve inhoud

Het <canvas>-element op zich is slechts een bitmap en biedt geen informatie over de getekende objecten. Canvasinhoud wordt niet blootgesteld aan toegankelijkheidshulpmiddelen zoals semantische HTML dat wel is. Over het algemeen zou je het gebruik van canvas in een toegankelijke website of app moeten vermijden. De volgende handleidingen kunnen helpen om het toegankelijker te maken.

Voorbeelden

HTML

Dit codefragment voegt een canvas-element toe aan je HTML-document. Er wordt een terugvaltekst opgegeven voor het geval een browser het canvas niet kan lezen of weergeven.

<canvas width="120" height="120">
  An alternative text describing what your canvas displays.
</canvas>

JavaScript

Roep vervolgens in de JavaScript-code HTMLCanvasElement.getContext() aan om een tekencontext te verkrijgen en te beginnen met tekenen op het canvas:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
// Add a rectangle at (10, 10) with size 100x100 pixels
ctx.fillRect(10, 10, 100, 100);

Resultaat

Technische samenvatting

Zie ook

• <img>