Amusons-nous avec les canvas – le retour

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.

Cet objet est FontFace, et son constructeur a deux paramètres obligatoires: le nom sous lequel la police sera utilisable dans le document, et le chemin vers le fichier de police. En troisième paramètre on peut fournir un objet contenant des propriétés de police (style, weight…).

Pour pouvoir récupérer le fichier d’une police de Google Fonts, il faut aller regarder dans le CSS dont on nous donne l’adresse dans la section “Use on the web”, et copier la règle src du font-face qui nous intéresse.

Section « Use on the web »
/* latin-ext */
@font-face {
  font-family: 'Knewave';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/knewave/v14/sykz-yx0lLcxQaSIhSO3--rE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Knewave';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/knewave/v14/sykz-yx0lLcxQaSIhS23-w.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

L’intérêt d’un objet FontFace est qu’il possède une méthode load(), qui permet de réellement changer le fichier de police, qui est chainable avec une méthode then(), à laquelle on fournit une fonction anonyme qui rajoute la police chargée dans celles utilisables dans le document, et le code à exécuter par la suite.

const customFont = new FontFace('CustomFont', 'url(https://fonts.gstatic.com/s/knewave/v14/sykz-yx0lLcxQaSIhS23-w.woff2)');

customFont.load().then(() => {
    document.fonts.add(customFont); // assigne la font au document

    // votre code

}

Le deuxième changement concerne la façon de composer l’image. Pour pouvoir ajouter l’ombre derrière le texte contenant l’image, je passait par un calque intermédiaire, mais il est possible de faire sans.

La première partie reste la même : on trace le texte sur le canvas, et après avoir passé le mode de compositing en ‘source-atop’ on ajoute l’image.

Ensuite, on passe le mode de compositing en ‘destination-over’, et après avoir rajouté une couleur et un flou d’ombre au contexte, on retrace à nouveau le texte.

Comme dans le cas du script de texte arc-en-ciel, il est maintenant possible d’avoir un résultat similaire avec seulement du CSS. Mais alors, pourquoi l’avoir fait avec du JS ? me diriez-vous. Tout simplement parce qu’on le peut, et que cela fait un bon exercice. Et petit bonus, ça donnera l’occasion d’écrire un autre tuto.

Pour voir le script final en action, rendez-vous ici.

À bientôt pour d’autres aventures codesques.

Laisser un commentaire