Il y a quelques années, j’avais écrit une série d’articles expliquant comment créer à l’aide du  tag <canvas> un texte ombré avec une image en fond utilisant une police Google Fonts.

La technique ayant un peu évolué depuis, et ayant fait de nouveaux essais de mon côté, je pense qu’il est temps de créer une nouvelle version de ce code.

Le premier changement concerne la façon dont on gère l’utilisation de la police Google Font dans le canvas.

Dans le premier script, le chargement de la police était assuré de manière “classique” par CSS. Le problème ? Pour que la police soit utilisable dans le canvas, il faut que la police soit utilisée sur au moins un élément de notre page. Et pour s’assurer que la police soit bien chargée, le code qui s’occupe du “dessin” est exécuté après 1s (utilisation d’un setTimeOut()).

Depuis les versions 35 de Chrome et la version 41 de Firefox, toutes deux sorties après la rédaction de la première série d’articles, il existe un objet JavaScript qui permet de définir une police personnalisée, qui par la suite peut être utilisée partout sur le document, y compris dans les canvas.