¿Cómo puedo usar fuentes personalizadas en un elemento Canvas de HTML5?

fonts cufon

Question

He visto cosas como Cufon y typeface.js, pero parecen ser alternativas de SIFR y no te permiten establecer coordenadas de forma libre y dibujar tipos personalizados en un <canvas>

¿Alguien tiene alguna idea?

Answer 1

Acabo de responder esta pregunta aquí: Precargar la fuente HTML5, JS, Kinetic.js?

La parte esencial:

@font-face {
    font-family: ''myfont'';
    src: url(''myfont.eot'');
    src: url(''myfont.eot?#iefix'') format(''embedded-opentype''),
         url(''myfont.woff'') format(''woff''),
         url(''myfont.ttf'') format(''truetype''),
         url(''myfont.svg#myfont'') format(''svg'');
    font-weight: normal;
    font-style: normal;
}

No debería importar si está usando KineticJS o no, la única diferencia sin KineticJS es que posiblemente crearía el elemento Canvas directamente con HTML en lugar de usar una capa div como contenedor. Después de todo KineticJS solo crea un elemento Canvas normal en ese contenedor.

Answer 2

He creado una demostración simple en jsfiddle que muestra cómo hacer esto con @ font-face: http://jsfiddle.net/zMKge/

Opera también tiene un tutorial simple sobre el uso de <canvas> , incluida la API de texto, pero no soy lo suficientemente bueno como para tener dos hipervínculos. :)

CSS:

@font-face {
    font-family: ''KulminoituvaRegular'';
    src: url(''http://www.miketaylr.com/f/kulminoituva.ttf'');
}

Javascript:

var ctx = document.getElementById(''c'').getContext(''2d'');
var kitty = new Image();
kitty.src = ''http://i954.photobucket.com/albums/ae30/rte148/891blog_keyboard_cat.gif'';
kitty.onload = function(){
  ctx.drawImage(this, 0,0,this.width, this.height);
  ctx.font         = ''68px KulminoituvaRegular'';
  ctx.fillStyle = ''orangered'';
  ctx.textBaseline = ''top'';
  ctx.fillText  (''Keyboard Cat'', 0, 270);
};