Drawing in HTML Canvas
- Previous Page Canvas Introduction
- Next Page Canvas Coordinates
Tekenen op het canvas met JavaScript
Alle tekeningen op een HTML-canvas moeten met JavaScript worden uitgevoerd:
Voorbeeld
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Stap 1: Vind het Canvas-element
Eerst moet u het <canvas>-element vinden.
Dit wordt gedaan met de HTML DOM-methode getElementById():
const canvas = document.getElementById("myCanvas");
Stap 2: Maak het tekenobject aan
Daarnaast hebt u een tekenobject voor het canvas nodig.
getContext() is een ingebouwde HTML-object die eigenschappen en methoden biedt voor tekenen:
const ctx = canvas.getContext("2d");
Stap 3: Teken op het canvas
Ten slotte kunt u tekenen op het canvas.
Stel de vullingsstijl van het tekenobject in op rood:
ctx.fillStyle = "#FF0000";
De fillStyle-eigenschap kan een CSS-kleur, een verloop of een patroon zijn. De standaard fillStyle is zwart.
De fillRect(x,y,width,height) methode tekent een rechthoek op het canvas, gevuld met de fillStyle:
ctx.fillRect(0, 0, 150, 75);
See also:
- Previous Page Canvas Introduction
- Next Page Canvas Coordinates
