Comment puis-je utiliser des polices personnalisées dans un élément HTML5 Canvas ?

Question

J'ai regardé des choses comme Cufon et typeface.js, mais elles semblent être des alternatives à SIFR et ne permettent pas de définir des coordonnées libres et de dessiner des caractères personnalisés sur un écran. <canvas>

Quelqu'un a une idée ?

Answer 1

J'ai mis en place une démo simple sur jsfiddle ici, montrant comment faire cela avec @font-face : http://jsfiddle.net/zMKge/

Opera dispose également d'un simple tutoriel sur l'utilisation <canvas> y compris l'API texte.

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

Je viens de répondre à cette question ici : Précharger la police HTML5, JS, Kinetic.js ?

La partie essentielle :

@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;
}

Peu importe que vous utilisiez KineticJS ou non, la seule différence sans KineticJS est que vous pourriez créer l'élément Canvas directement avec le HTML au lieu d'utiliser une couche div comme conteneur. Après tout, KineticJS crée simplement un élément Canvas normal dans ce conteneur.

Answer 3

J'ai cherché cette réponse récemment.

Vérifiez : http://d2o0t5hpnwv4c1.cloudfront.net/259_cufon/MyNewProject/index.html

(fonctionne pour moi dans safari, opera, ff, et chrome sur mac)

** edit **

En examinant ce que cela implique, on se rend compte que ce n'est pas une solution qui conviendra à tout le monde. Félicitations aux gens de Cufon.