Canvas font eigenschap
Definitie en gebruik
font Eigenschap die het huidige lettertype van de tekst op het canvas instelt of retourneert.
font De syntaxis van de eigenschap die wordt gebruikt is dezelfde als CSS font propertyGelijk.
Voorbeeld
Schrijf een tekst van 40 pixels 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";
Attribuutwaarde
| Waarde | Beschrijving |
|---|---|
| font-style |
Stel de lettertypestijl in. Mogelijke waarden:
|
| font-variant |
Stel de lettertypevariant in. Mogelijke waarden:
|
| font-weight |
Stel de dichtheid van het lettertype in. Mogelijke waarden:
|
| font-size / line-height | Stel de lettergrootte en lijnhoogte in, uitgedrukt in pixels. |
| font-family | Stel de lettertypefamilie in. |
| caption | Gebruik de lettertype voor titelknoppen (bijvoorbeeld knoppen, keuzelijsten, etc.). |
| icon | Gebruik de lettertype voor het markeren van pictogrammen. |
| menu | Gebruik de lettertype voor menu's (keuzelijsten en menulijsten). |
| message-box | Gebruik de lettertype voor dialogvensters. |
| small-caption | Gebruik de lettertype voor het markeren van kleine knoppen. |
| status-bar | Use the font for the window status bar. |
Technical details
| Default value: | 10px sans-serif |
|---|
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
