HTML canvas lettertype eigenschap
definitie en gebruik
font stelt of keert de huidige lettertype-eigenschappen van de tekst op het canvas in.
font De syntaxis van het attribuut CSS font eigenschaphetzelfde
voorbeeld
Schrijf een tekst van 40 pixels hoog op het canvas, met het lettertype "Arial":
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px Arial";
ctx.fillText("Hello World",10,50);
syntaxis
context.font="italic small-caps bold 12px arial";
eigenschapswaarde
| waarde | beschrijving |
|---|---|
| font-style |
Stel de stijl van het lettertype in. Mogelijke waarden:
|
| font-variant |
Stel de variatie van het lettertype in. Mogelijke waarden:
|
| font-weight |
Stel de dikte van het lettertype in. Mogelijke waarden:
|
| font-size / line-height | Stel de grootte en de lijnhoogte in, gemeten in pixels. |
| font-family | Stel het lettertype series in. |
| caption | Gebruik het lettertype voor titelcontroleelementen (bijvoorbeeld knoppen, dropdown-lijsten, etc.). |
| icon | Gebruik het lettertype voor pictogrammen. |
| menu | Gebruik het lettertype voor menu's (dropdown-lijsten en menulijsten). |
| message-box | Gebruik het lettertype voor dialogen. |
| small-caption | Gebruik het lettertype voor kleine knoppen. |
| status-bar | Gebruik de lettertype voor de statusbalk van het venster. |
Technische details
| Standaardwaarde: | 10px sans-serif |
|---|
Browserondersteuning
De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Opmerking:Internet Explorer 8 en oudere versies ondersteunen geen <canvas> element.
