Créer du texte multi-lignes et un background avec canvas

Apprenez à créer du texte sur plusieurs lignes et à changer l’arrière-plan dans canvas grâce à une nouvelle fonctionnalité mise à votre disposition.

Récemment, pendant le développement d’un jeu sur le Web pour mobile avec HTML 5 et la balise canvas, nous nous sons heurté à un problème de mise en forme du texte. Vous avez sûrement dû rencontrer ce même problème si vous développez avec la balise canvas.

Il s’agit de la gestion du texte sur plusieurs lignes.

Avec canvas, vous pouvez très facilement afficher du texte. Par contre, pour l’afficher sur plusieurs lignes et avec un fond de couleur donc un background, c’est un peu long et fastidieux.

Bien évidemment, c’est tout à fait faisable avec HTML 5, mais c’est plutôt long et fastidieux.

Sur Internet, il existe des fonctions qui permettent de faire cela. En plus de gérer les sauts de ligne, vous pouvez fournir une largeur. Puis, vous passez votre texte, il sera automatiquement mis en forme dans ce bloc.

Si vous avez déjà développé avec ActionScript Flash, vous savez de quoi nous parlons.

Il s’agit bien de textfield, c’est génial !

Et nous avons rajouté la possibilité de renseigner les sauts de lignes, des \n en plus. Avec l’espacement entre les différentes lignes et le fond de couleur, vous avez une fonction très pratique et très simple d’utilisation.

Nous venons de modifier et améliorer le code disponible ici-dessous avec toutes ces fonctionnalités.

Nous sommes quasi-certains que vous allez apprécier cette fonction.

function addMultiLineText(text, x, y, lineHeight, fitWidth, oContext, bDebug) 
{ 
   var draw = x !== null && y !== null;

   // pour la gestion des sauts de ligne manuels 
   text = text.replace(/(\r\n|\n\r|\r|\n)/g, "\n"); 
   sections = text.split("\n"); 

   var i, str, wordWidth, words, currentLine = 0, 
   maxHeight = 0, 
   maxWidth = 0; 
   
   var printNextLine = function(str) 
   { 
      if (draw) 
         oContext.fillText(str, x, y + (lineHeight * currentLine));

      currentLine++; 
      wordWidth = oContext.measureText(str).width;

      if (wordWidth > maxWidth) 
         maxWidth = wordWidth; 
   }; 

   for (i = 0; i < sections.length; i++)
   { 
      words = sections[i].split(' '); index = 1;

      while (words.length > 0 && index <= words.length) 
      { 
         str = words.slice(0, index).join(' '); 
         wordWidth = oContext.measureText(str). width; 

         if (wordWidth > fitWidth) 
         { 
            if (index === 1) 
            { 
               str = words.slice(0, 1).join(' '); words = words.splice(1);
            } 
            else 
            { 
               str = words.slice(0, index - 1).join(' '); 
               words = words.splice(index - 1); 
            } 
               printNextLine(str); index = 1; 
         } 
         else 
            index++;
      } 

      if (index > 0) 
         printNextLine(words.join(' ')); 
   }

   maxHeight = lineHeight * (currentLine); 

   if (bDebug) 
      // Encadre le texte dans un rectangle 
      oContext.strokeRect(x, y, maxWidth, maxHeight); 

   if (!draw) 
   { 
      return { 
         height: maxHeight,
         width: maxWidth 
      };
   }

};

Elle s’appelle addMultiLineText. Elle gère les sauts de lignes automatiques et les sauts de lignes manuels.

Vous avez une zone de debug qui encadre le texte dans un rectangle. Et vous pouvez obtenir la hauteur et la largeur du texte généré. Très pratique si vous en avez besoin derrière pour faire un autre traitement.

function addTextBackground(oContext, x, y, width, height, color) 
{ 
   oContext.save();
   oContext.textBaseline = 'top';
   oContext.fillStyle = color; 
   oContext.fillRect(x, y, width, height); 
   oContext.restore(); 
}

Et la fonction addTextBackground ajoute une couleur de fond sous le texte. Une utilisation très simple : vous transmettez la position du background, sa couleur et le texte HTML 5. C’est aussi simple que ça !

Voici les différents paramètres : vous transmettez le texte, la position du texte, la hauteur des lignes, la largeur, la largeur du texte que vous voulez, le contexte. Et soit vous activez ou non le debug. Puis, vous intégrez vos deux fichiers JavaScript tout simplement dans votre page html.

function Main() {
   console.log("Main"); 

   var oDivGame = document.getElementById("idGameDiv"); 
   var canvas = document.createElement("canvas"); 
   canvas.setAttribute("width", 650 + "px"); canvas.setAttribute("height", 550 + "px") ; 

   oDivGame.appendChild(canvas); 

   ctx = canvas.getContext('2d'); 
   ctx.fillStyle = "#00C5DF"; // couleur du texte 
   ctx.font = "17px Arial";

   var x = 0, 
   y = 0, 
   width = 350, 
   height = 130, 
   nSpace = 20, 
   text = "Bonjour, \nBienvenue sur Develop4fun. Un texte de plus en plus long à l'écran pour montrer les sauts de lignes automatiques ! \nÀ Bientôt."; 

   addTextBackground(ctx, x, y, width, height, '#fff' );    
   addMultiLineText(text, x+10, y+20, nSpace, width, ctx); 

   x = 50; 
   y = 170; 
   width = 269; 
   height = 230; 
   nSpace = 28;

    text = "Bonjour, \nBienvenue sur Develop4fun. Un texte de plus en plus long à l'écran pour montrer les sauts de lignes automatiques ! \nÀ Bientôt.";
 
   addTextBackground(ctx, x, y, width, height, '#FF8000' ); 
   addMultiLineText(text, x+10, y+20, nSpace, width, ctx); 
}

Et dans votre page principale :

<script type="text/javascript" src="include/js/text-multi.js"></script> 
<div id="idGameDiv" />

Vous utilisez une balise div identifiée avec un id idGameDiv. Vous créez une balise canvas de la taille dont vous avez besoin. Et vous récupérez le contexte en 2D pour écrire votre texte dans le HTML 5.

Vous définissez la position du texte, du background, sa largeur, sa hauteur, l’espace entre chaque phrase. Puis, vous transmettez le background pour créer votre background avec la couleur. Pour tous les paramètres, c’est identique.

Pour ajouter le texte multi lignes, vous apercevez les sauts de lignes sur l’exemple ci-dessus. Voilà tout simplement.

Vous positionnez le background et le texte. Et vous mettez votre texte sur une seule ligne ou avec des \n si vous le souhaitez, ce n’est pas obligatoire.

Vous obtenez le même texte, mais sans les sauts de ligne, vous allez voir que le découpage se fait automatiquement.

C’est une fonctionnalité sans prétention mais qui va vous être extrêmement utile pendant le développement de vos applications de vos jeux HTML 5. Et pour cause nous en avons eu besoin lorsque on était en train de développer un jeu, c’est une fonction qui nous a énormément aidé. Nous espérons qu’elle va aussi vous aider. Elle est vraiment très pratique et il n’y a rien de plus simple à utiliser.

Conclusions

Spécifiquement pour la balise canvas, vous avez trouvé dans cet article un moyen de traiter un problème courant : le texte multiligne. Vous avez également vu comment gérer l’arrière-plan de ce texte.

Maintenant c’est à vous de jouer, utilisez cette fonction avec du texte de couleur, avec un fond de couleur, vous choisissez la couleur de texte et tout ce qu’il vous faut comme paramètres.