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

Question

He mirado en cosas como Cufon y typeface.js pero que parecen ser alternativas Sifr y no se permita que se asiente de forma libre coordenadas y dibujar tipo personalizado en un <canvas>

¿Alguien 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 tutorial sobre el uso de <canvas>, incluyendo el API de texto.

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

Yo sólo han respondido a esta pregunta aquí: precarga fuente HTML 5, 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 importa si se están utilizando KineticJS o no, la única diferencia es que sin KineticJS que posiblemente crear el elemento Canvas directamente con HTML en lugar de utilizar una capa div como contenedor. Después de todas las KineticJS simplemente crea un elemento Canvas normales en ese contenedor.