HTML canvas fontPropiedad
Ejemplos
Escribe un texto de 30 píxeles en el lienzo, usando la fuente "Arial":
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Pruébalo »
Soporte del navegador
![]()
![]()
![]()
![]()
![]()
Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con la propiedad font.
Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.
Definición y uso
La propiedad font establece o devuelve la propiedad de fuente actual del contenido de texto en el lienzo.
La sintaxis que usa la propiedad font es la misma que lapropiedad CSS fontmisma.
| Valor predeterminado: | 10px sans-serif |
|---|---|
| Sintaxis de JavaScript: | context.font="italic small-caps bold 12px arial"; |
Valores de la propiedad
| Valor | Descripción |
|---|---|
| font-style | Especifica el estilo de fuente. Valores posibles:
|
| font-variant | Especifica la variante de fuente. Valores posibles:
|
| font-weight | Especifica el grosor de la fuente. Valores posibles:
|
| font-size/line-height | Especifica el tamaño de fuente y la altura de línea, en píxeles. |
| font-family | Especifica la familia de fuentes. |
| caption | Usa la fuente de los controles de título (como botones, listas desplegables, etc.). |
| icon | Usa la fuente utilizada para etiquetar iconos. |
| menu | Usa la fuente utilizada en los menús (listas desplegables y listas de menú). |
| message-box | Usa la fuente utilizada en los cuadros de diálogo. |
| small-caption | Usa la fuente utilizada para etiquetar controles pequeños. |
| status-bar | Usa la fuente utilizada en la barra de estado de la ventana. |
Otras extensiones
Objeto Canvas