8. Canvas

In HTML5 wordt de tag CANVAS geïntroduceerd, een container waarop via JavaScript grafische elementen getekend kunnen worden.

Het canvaselement wordt gedefinieerd in HTML (hoogte en breedte kan ook via CSS):
<canvas id="mijnCanvas" width="200" height="100"></canvas>

Heb je het canvas voorzien, dan kan je het via JavaScript gaan opvullen; bekijk bv. de broncode van dit eerste voorbeeldje.
Algemene werkwijze:

  1. Stel de eigenschappen in: vulkleur, omtrekkleur, lijnvorm, schaduw, ...
  2. Teken de vorm

8.1. De eigenschappen

Vertrekkend van het canvasobject var c = document.getElementById("mijnCanvas").getContext("2d"); komt hieronder een overzicht van de mogelijkheden:

c.fillStyle="#rrggbb"; vulkleur, standaard zwart
c.strokeStyle="#rrggbb"; lijnkleur, standaard zwart
c.lineCap="butt/round/square" vorm van de uiteinden van een lijnstuk, standaard "butt"
c.lineJoin="bevel/round/miter" vorm van de hoeken, standaard "miter" (scherp)
bij 'miter' kan je c.miterLimit="n" (standaard 10) op een lagere waarde instellen, om ervoor te zorgen dat een te scherpe hoek afgeknot wordt
c.lineWidth="n"; lijndikte, standaard 1
c.shadowColor="#rrggbb";kleur van de schaduw, standaard zwart
c.shadowOffsetX="n";horizontale verschuiving van de schaduw t.o.v. de vorm, standaard 0
c.shadowOffsetY="n";verticale verschuiving van de schaduw t.o.v. de vorm, standaard 0
c.shadowBlur="n";grootte van het vervagend effect aan de buitenrand van de schaduw, standaard 0
var grd = c.createLinearGradient(x0,y0,x1,y1);
grd.addColorStop(0.n,"beginKleur");
grd.addColorStop(0.n, "eindKleur");
c.fillStyle=grd; (of strokeStyle)
maak een verloopvulling van positie (x0,y0) tot (x1,y1) met een percentage begin- en eindkleur, bv. 0.5 - 0.5, 0.8 - 0.2, ...
var grd = c.createRadialGradient(x0,y0,r0,x1,y1,r1);
grd.addColorStop(0.n,"beginKleur");
grd.addColorStop(0.n, "eindKleur");
c.fillStyle=grd; (of strokeStyle)
maak een verloopvulling van cirkel met middelpunt (x0,y0) en straal r0 tot cirkel met middelpunt (x1,y1) en straal r1
c.createPattern(img,"repeat");maak een patroon met een Image-object en herhaal het, opties: "repeat","repeat-x","repeat-y","no-repeat"

8.2. De vorm tekenen

Nu de vorm zelf tekenen:

c.fillRect(x,y,w,h);teken een rechthoek met breedte w, hoogte h, linkerbovenhoek (x,y) en de vulkleur van fillStyle
c.strokeRect(x,y,w,h);teken een rechthoek met breedte w, hoogte h, linkerbovenhoek (x,y) en de randkleur van strokeStyle
c.clearRect(x,y,w,h);Wist alle pixels binnen de rechthoek met breedte w, hoogte h en linkerbovenhoek (x,y)
c.beginPath();
c.moveTo(x1,y1);
begin een nieuw pad op (x1,y1) en gebruik dan c.lineTo(x2,y2) of arcTo, bezierCurveTo, ... om een lijn of curve te tekenen
c.closePath();als je met meer lijnen een niet-gesloten vorm getekend hebt, kan je deze optie gebruiken om het laatste lijnstuk te tekenen en de vorm te sluiten.
c.lineTo(x,y)tekent een lijnstuk van het actieve punt (bv. gekozen via moveTo) naar locatie (x,y)
c.rect(x,y,w,h);
c.fill() of c.stroke();
voorzie een rechthoek vanuit linkerbovenhoek (x,y) met breedte w en hoogte h;
met c.fill() of c.stroke() kies je dan voor resp. vulling of omtrek in de eerder ingestelde kleur
c.clip();bepaal het deel van je canvas dat zichtbaar moet blijven, bv. met rect(...) of arc(...), en gebruik dan clip() om de rest onzichtbaar te maken
c.quadraticCurveTo(cx,xy,x,y);teken een lijnstuk van het actieve punt (bv. gekozen via moveTo) naar locatie (x,y) en maak er dan een curve van door de lijn te 'trekken' naar controlepunt (cx,cy)
c.bezierCurveTo(cx1,cy1,cx2,cy2,x,y);teken een lijnstuk van het actieve punt (bv. gekozen via MoveTo) naar locatie (x,y) en maak er dan een boog van door de lijn te 'trekken' naar beide controlepunten (cx1,cy1) en (cx2,cy2)
c.arc(x,y,r,shoek,ehoek,[richting]); teken een cirkel met middelpunt (x,y), straal r, van startpunt tot eindpunt op de cirkel (bv. 0 tot 2*Math.PI = volle cirkel), eventueel in een bepaalde richting, true = met de klok mee of false = tegen de klok in
c.arcTo(x1,y1,x2,y2,r); maak een boog tussen (x1,y1) en (x2,y2) met straal r

8.3. De vorm aanpassen

Achteraf de vorm aanpassen?

c.isPointInPath(x,y); true als punt (x,y) deel uitmaakt van het pad, anders false
c.scale(x,y); vergroot/verklein alle volgende vormen met factor x in de breedte en y in de hoogte
c.rotate(hoek); draai de erop volgende vorm met hoek = aantal graden * PI/180
c.translate(x,y); herhaal de laatste vorm, maar met een verschuiving van x horizontaal en y verticaal
c.transform(b,hoek, s, h, r, o); herhaal de laatste vorm opnieuw met transformatie in breedte, hoek, scheeftrekking, hoogte, verschuiving naar rechts of omlaag
c.setTransform(b,hoek, s, h, r, o); herhaal de laatste vorm opnieuw met transformatie in breedte, hoek, scheeftrekking, hoogte, verschuiving naar rechts of omlaag, onafhankelijk van eerder ingestelde transformaties

8.4. Tekst op het canvas

Of moet er tekst op je canvas? Eerst stel je de eigenschappen in, dan laat je de tekst zelf verschijnen.

c.font="grootte font"; bepaal de grootte in pixels en het lettertype voor de tekst die volgt
c.textalign="start/end/left/right/center"; de horizontale uitlijning van tekst, standaard "start"
c.textBaseline="alphabetic/bottom/hanging/ideographic/middle/top"; de verticale uitlijning van de tekst, standaard "alphabetic"
c.fillText("tekst", x, y, [maxBreedte]); Zet de tekst op positie (x,y) met de eerder ingestelde vulkleur
c.strokeText("tekst", x, y, [maxBreedte]); Zet de tekst op positie (x,y) met de eerder ingestelde omtrekkleur
var b = c.measureText("tekst").width; geeft de breedte van de tekst in pixels