Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
CanvasRenderingContext2D.font
Baseline
2025
Nouvellement disponible
Depuis March 2025, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
La propriété CanvasRenderingContext2D.font de l'API Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de police CSS. La police par défaut est 10px sans-serif.
Syntaxe
ctx.font = value;
Options
Exemples
Utilisation de la propriété font
Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);
Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :
Code jouable
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.font = '48px serif';
ctx.strokeText('Hello world', 50, 100);</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener("click", function () {
textarea.value = code;
drawCanvas();
});
edit.addEventListener("click", function () {
textarea.focus();
});
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
Chargement de polices avec l'API CSS Font Loading
A l'aide de l'API FontFace, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.
var f = new FontFace("test", "url(x)");
f.load().then(function () {
// Prêt à utiliser la police dans un contexte de canevas
});
Spécifications
| Spécification |
|---|
| HTML # dom-context-2d-font-dev |
Compatibilité des navigateurs
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Voir aussi
- L'interface la définissant,
CanvasRenderingContext2D
Aider à améliorer MDN
Cette page a été modifiée le par les contributeur·ice·s du MDN.