Texte et images sur `canvas`

Définissez la police : ctx.font = "bold 24px sans-serif". Dessinez avec ctx.fillText("Hello", x, y) ou ctx.strokeText("Hello", x, y). La coordonnée y correspond à la ligne de base du texte ; ajoutez la hauteur des ascendantes au-dessus pour positionner correctement le texte dans une boîte englobante.

ctx.textAlign contrôle l’alignement horizontal : "left" (par défaut), "center", "right". ctx.textBaseline contrôle l’alignement vertical par rapport à y : "top", "middle", "alphabetic" (par défaut), "bottom". Pour centrer le texte, définissez les deux propriétés sur "center" et "middle".

ctx.measureText("text") renvoie un objet TextMetrics contenant la largeur et les métriques de police. Utilisez-le pour calculer dynamiquement les positions du texte : centrer le texte dans une boîte, le répartir sur plusieurs lignes à la largeur maximale maxWidth ou aligner des étiquettes à droite à côté de points de données.

Le canevas ne prend pas en charge automatiquement le retour à la ligne du texte. Implémentez-le ainsi : mesurez la largeur des mots, accumulez-les jusqu’à dépasser maxWidth, puis passez à une nouvelle ligne selon des intervalles de lineHeight. Il s’agit d’une fonction utilitaire courante dans les bibliothèques de rendu sur canevas.

ctx.drawImage(image, dx, dy) dessine une image HTML, un canevas HTML ou une vidéo HTML à la position (dx, dy). Chargez d’abord l’image et dessinez-la dans son gestionnaire de chargement pour vous assurer que les pixels sont disponibles avant le dessin.

ctx.drawImage(image, dx, dy, dw, dh) adapte l’image aux dimensions dw × dh. La conservation des proportions n’est pas automatique : calculez les dimensions manuellement. Pour conserver les proportions : dw = img.width * scale; dh = img.height * scale.

La version de drawImage à neuf arguments est la suivante : ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). Le rectangle source (sx, sy, sw, sh) délimite la zone à rogner dans l’image ; le rectangle de destination (dx, dy, dw, dh) positionne et met à l’échelle cette zone sur le canevas.

ctx.imageSmoothingEnabled = false désactive l’interpolation bilinéaire lors de la mise à l’échelle des images. Utilisez cette option pour le pixel art lorsque vous souhaitez une mise à l’échelle nette, sans lissage. Laissez-la activée (valeur par défaut) pour les photographies, dont la mise à l’échelle lisse est plus esthétique.

Passez un canevas comme source à drawImage pour effectuer le rendu d’un canevas sur un autre. Cela permet le rendu hors écran : dessinez des compositions complexes sur un canevas masqué, puis dessinez ce canevas sur le canevas visible en une seule opération à chaque image.

ctx.globalAlpha (de 0 à 1) applique une transparence uniforme à tous les dessins suivants. ctx.globalCompositeOperation contrôle la manière dont les nouveaux dessins se combinent avec les pixels existants : "source-over" (par défaut), "multiply", "screen", "destination-out" (effacement), et bien d’autres.

canvas.toDataURL("image/png") exporte le canevas sous forme d’URL de données PNG encodée en base64. Utilisez-la pour un téléchargement déclenché par l’utilisateur : créez une ancre, définissez son attribut de destination sur l’URL de données et son attribut de téléchargement sur un nom de fichier, puis déclenchez un clic par programmation.

Sur quoi influe ctx.textBaseline = "middle" lors du dessin du texte ?

Le rendu du texte sur canevas utilise ctx.font, fillText/strokeText, textAlign et textBaseline pour le positionnement, ainsi que measureText pour les calculs de mise en page. Le dessin d’images avec drawImage prend en charge la mise à l’échelle et le rognage ; globalAlpha et globalCompositeOperation contrôlent la composition. toDataURL exporte le canevas pour le téléchargement ou une utilisation ultérieure.