Propiedad font

La propiedad context.font sigue la misma sintaxis que la declaración CSS font. Su valor por defecto es "10px sans-serif" y admite los siguiantes componentes:

context.font = "font-style font-variant font-weight font-size font-family";

Estilo de fuente (font-style)

• normal: estilo por defecto.
• italic: letras inclinadas con glifos diseñados para ese estilo.
• oblique: letras inclinadas mecánicamente.

const lienzo = document.querySelector('#lienzo');
const ctx = lienzo.getContext('2d');
ctx.fillStyle = '#058';

ctx.font = 'italic 40px sans-serif';
ctx.fillText('Texto en cursiva', 40, 100);

ctx.font = 'oblique 40px sans-serif';
ctx.fillText('Texto oblicuo', 40, 200);

Variantes de fuente (font-variant)

• normal: comportamiento por defecto.
• small-caps: convierte el texto en versalitas.

const ctx = document.querySelector('#lienzo').getContext('2d');
ctx.fillStyle = '#058';

ctx.font = 'bold 40px sans-serif';
ctx.fillText('Hola Mundo', 40, 100);

ctx.font = 'small-caps bold 40px sans-serif';
ctx.fillText('Hola Mundo', 40, 200);

Peso de fuente (font-weight)

Los valores pueden ser palabras clave o números del 100 al 900. Sin embargo, muchos navegadores solo distinguen 400 (normal) y 700 (bold).

• lighter, normal, bold, bolder
• 100 a 900

const ctx = document.querySelector('#lienzo').getContext('2d');
ctx.fillStyle = '#058';

ctx.font = 'normal 40px Impact';
ctx.fillText('Peso normal', 40, 100);

ctx.font = 'bold 40px Impact';
ctx.fillText('Peso bold', 40, 200);

Tamaño de fuente (font-size)

Se puede expresar en píxeles, ems, porcantajes o con palabras clave absolutas.

• 20px, 2em, 150%
• xx-small, x-small, small, medium, large, x-large, xx-large

const ctx = document.querySelector('#lienzo').getContext('2d');
ctx.fillStyle = '#058';

ctx.font = 'xx-small sans-serif';
ctx.fillText('Tamaño muy pequeño', 40, 100);

ctx.font = 'medium sans-serif';
ctx.fillText('Tamaño medio', 40, 200);

ctx.font = 'xx-large sans-serif';
ctx.fillText('Tamaño muy grande', 40, 300);

Familia de fuente (font-family)

Es recomendable indicar varias familias alternativas para mejorar la compatibilidad entre navegadores. También es posible utilizar fuentes cargadas mediante @font-face.

const ctx = document.querySelector('#lienzo').getContext('2d');
ctx.fillStyle = '#058';

ctx.font = '40px Georgia, "Times New Roman", serif';
ctx.fillText('Fuente con alternativas', 40, 100);

Alineación del texto

Alnieación horizontal (textAlign)

Controla desde qué punto horizontal se dibuja el texto respecto a las coordenadas indicadas.

• left
• center
• right

const ctx = document.querySelector('#lienzo').getContext('2d');
ctx.fillStyle = '#058';
ctx.font = 'bold 40px sans-serif';

const centro = ctx.canvas.width / 2;

ctx.textAlign = 'left';
ctx.fillText('Alineado a la izquierda', centro, 100);

ctx.textAlign = 'center';
ctx.fillText('Alineado al centro', centro, 200);

ctx.textAlign = 'right';
ctx.fillText('Alineado a la derecha', centro, 300);

ctx.strokeStyle = '#888';
ctx.beginPath();
ctx.moveTo(centro, 0);
ctx.lineTo(centro, ctx.canvas.height);
ctx.stroke();

Alineación vertical (textBaseline)

Define la línea de referencia vertical del texto.

• top
• middle
• bottom
• alphabetic: línea base para alfabetos latinos.
• ideographic: línea base para ideogramas.
• hanging: línea base para escrituras devanagari.

const ctx = document.querySelector('#lienzo').getContext('2d');
ctx.fillStyle = '#058';
ctx.font = 'bold 40px sans-serif';

const posiciones = ['top', 'middle', 'bottom', 'alphabetic', 'ideographic', 'hanging'];
const y = 80;

posiciones.forEach((base, indice) => {
  const posY = y + indice * 70;
  ctx.textBaseline = base;
  ctx.fillText(`Línea base: ${base}`, 40, posY);
  dibujarGuia(ctx, posY);
});

function dibujarGuia(contexto, altura) {
  contexto.save();
  contexto.strokeStyle = '#888';
  contexto.lineWidth = 1;
  contexto.beginPath();
  contexto.moveTo(0, altura);
  contexto.lineTo(contexto.canvas.width, altura);
  contexto.stroke();
  contexto.restore();
}

Medición de texto

El método measureText() devuelve un objeto con información sobre las dimensiones del texto. La propiedad más utilizada es width, que indica el ancho que ocuparía la cadena al renderizarse.

const ctx = document.querySelector('#lienzo').getContext('2d');
ctx.fillStyle = '#058';
ctx.font = 'bold 40px sans-serif';

const mensaje = 'Hola mundo';
ctx.fillText(mensaje, 40, 100);

const ancho = ctx.measureText(mensaje).width;
ctx.fillText(`Ancho medido: ${ancho.toFixed(2)} px`, 40, 200);