HTML- canvastekening
Teken op het canvas met JavaScript
Alle tekeningen op het HTML-canvas moeten met JavaScript worden gedaan:
Voorbeeld
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Stap 1: Zoek het canvaselement
Allereerst moet je het <canvas>-element vinden.
Dit wordt gedaan met behulp van de HTML DOM-methode getElementById():
var canvas = document.getElementById("myCanvas");
Stap 2: Maak een tekenobject
Ten tweede heb je een tekenobject nodig voor het canvas.
De getContext() is een ingebouwd HTML-object, met eigenschappen en methoden voor tekenen:
var ctx = canvas.getContext("2d");
Stap 3: Teken op het canvas
Ten slotte kun je op het canvas tekenen.
Stel de vulstijl van het tekenobject in op de kleur rood:
ctx.fillStyle = "#FF0000";
De eigenschap fillStyle kan een CSS-kleur, een verloop of een patroon zijn. De standaard fillStyle is zwart.
De methode fillRect( x,y,width,height ) tekent een rechthoek, gevuld met de vulstijl, op het canvas:
ctx.fillRect(0, 0, 150, 75);