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

Question

He mirado en cosas como Cufon y typeface.js pero parecen ser alternativas Sifr y no permiten establecer las coordenadas de forma libre y dibuja tipo personalizado en una cualquiera <canvas>

tiene alguna idea?

Answer 1

He tirado juntos una demostración simple en jsFiddle aquí mostrando cómo hacer esto con @ font-face: http://jsfiddle.net/zMKge/

Opera también tiene una explicación sencilla sobre el uso de <canvas>, incluida la API de texto, pero estoy no lo suficientemente frío 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); 
}; 

Answer 2

simplemente he respondido a esta pregunta aquí: Preload font 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.