Tekst en afbeeldingen op canvas

ctx.measureText("text") retourneert een TextMetrics-object met de breedte en lettertypegegevens. Gebruik dit om tekstposities dynamisch te berekenen — bijvoorbeeld om tekst in een vak te centreren, tekst bij een maximale breedte terug te laten lopen of labels rechts uit te lijnen naast gegevenspunten.

Canvas heeft geen ingebouwde tekstterugloop. Implementeer dit door woordbreedtes te meten, deze op te tellen tot de maximale breedte wordt overschreden en dan op intervallen van lineHeight naar een nieuwe regel te gaan. Dit is een veelgebruikte hulpfunctie in bibliotheken voor canvasweergave.

ctx.drawImage(image, dx, dy) tekent een HTMLImageElement, HTMLCanvasElement of HTMLVideoElement op (dx, dy). Laad de afbeelding eerst en teken in de onload-handler, zodat de pixels beschikbaar zijn voordat je tekent.

ctx.drawImage(image, dx, dy, dw, dh) schaalt de afbeelding zodat deze in dw x dh past. De beeldverhouding wordt niet automatisch behouden — bereken de afmetingen handmatig. Om de beeldverhouding te behouden: dw = img.width * scale; dh = img.height * scale.

drawImage met negen argumenten: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). De bronrechthoek (sx, sy, sw, sh) snijdt een deel uit de afbeelding; de doelrechthoek (dx, dy, dw, dh) plaatst en schaalt dit uitgesneden deel op het canvas.

ctx.imageSmoothingEnabled = false schakelt bilineaire interpolatie uit bij het schalen van afbeeldingen. Gebruik dit voor pixelkunst wanneer scherpe, niet-gladde schaling gewenst is. Laat het ingeschakeld (standaard) voor fotografische afbeeldingen, waarbij vloeiend schalen er beter uitziet.

Geef een canvas als bron door aan drawImage — zo render je het ene canvas op het andere. Hiermee kun je buiten beeld renderen: teken complexe composities op een verborgen canvas en teken dat canvas vervolgens elke frame in één bewerking op het zichtbare canvas.

ctx.globalAlpha (0 tot 1) past uniforme transparantie toe op alle daaropvolgende tekenbewerkingen. ctx.globalCompositeOperation bepaalt hoe nieuwe tekeningen met bestaande pixels worden samengevoegd: "source-over" (standaard), "multiply", "screen", "destination-out" (wissen) en meer.

canvas.toDataURL("image/png") exporteert het canvas als een PNG-gegevens-URL in base64. Gebruik dit voor een door de gebruiker gestart downloaden: maak een anker-element, stel href in op de gegevens-URL en download in op een bestandsnaam en klik er vervolgens programmatisch op.

Tekstweergave op Canvas gebruikt ctx.font, fillText/strokeText, textAlign en textBaseline voor positionering, en measureText voor opmaakberekeningen. Afbeeldingen tekenen via drawImage ondersteunt schalen en bijsnijden; globalAlpha en globalCompositeOperation bepalen hoe tekeningen worden samengevoegd. toDataURL exporteert het canvas om te downloaden of verder te gebruiken.