Text 🔤

Neben Formen können wir auch Text auf das Canvas zeichnen — nützlich für Beschriftungen, Punktestände in Spielen oder Diagramme. Es gibt wieder zwei Funktionen:

ctx.fillText(text, x, y, maxWidth)    // ausgefüllter Text
ctx.strokeText(text, x, y, maxWidth)  // nur der Umriss

maxWidth ist optional und gibt an, wie breit der Text maximal sein darf — längerer Text wird gestaucht.

Wo ist der Text positioniert?

Die Koordinaten (x, y) geben an, wo die Baseline (Grundlinie) des Textes liegt:

x: Text startet x Pixel von links
y: die Grundlinie des Textes liegt y Pixel von oben

📌 Der Text geht nach oben von dieser Linie weg. Buchstaben wie „g“, „y“, „p“ ragen etwas darunter.

Schriftart und -größe

Mit font legst du Schriftart und -größe fest. Das Format ist "[Stil] [Größe] [Schriftart]":

ctx.font = "30px Arial"
ctx.font = "bold 30px Arial"
ctx.font = "italic 30px Arial"
ctx.font = "bold italic 30px Arial"

Textausrichtung

Mit textAlign legst du fest, wie der Text relativ zur x-Position liegt:

ctx.textAlign = "left"    // Standard: Text startet bei x
ctx.textAlign = "center"  // Text zentriert um x
ctx.textAlign = "right"   // Text endet bei x

Die rote Hilfslinie unten liegt bei x = 150:

Vertikale Ausrichtung

Mit textBaseline änderst du die vertikale Positionierung:

ctx.textBaseline = "alphabetic"  // Standard: Grundlinie
ctx.textBaseline = "top"         // y ist die Oberkante
ctx.textBaseline = "middle"      // y ist die Mitte
ctx.textBaseline = "bottom"      // y ist die Unterkante

💡 Meistens nimmst du den Standard alphabetic, aber top ist praktisch, wenn du y als Oberkante verstehen willst.

Farben bei Text

Text funktioniert wie Formen — mit fillStyle und strokeStyle, und du kannst beides kombinieren:

Übung 1 🎯 — Text in einem Quadrat

Male ein unausgefülltes Quadrat 150 × 150 mit 10 px Rand. Schreibe das Wort „Quadrat” zentriert in die Mitte. Beschrifte die vier Ecken mit ihren Koordinaten — nutze dafür horizontale (textAlign) und vertikale (textBaseline) Ausrichtung.

$Zielbild: ein Quadrat mit „Quadrat\” in der Mitte und den Koordinaten an den vier Ecken$

Übung 2 🎯 — Beschriftetes Schachbrett

Geh zurück zu deinem Schachbrett aus dem Farben-Kapitel und zeichne am Rand die Beschriftungen ein: Zahlen für die Reihen und Buchstaben für die Spalten.

Zielbild: ein Schachbrett mit Zahlen 1–8 an den Reihen und Buchstaben A–H an den Spalten

💡 Du kannst den Schachbrett-Loop wiederverwenden und in einem zweiten Loop am Rand die Beschriftungen mit fillText ergänzen.

Geschafft! 🎉

Du kannst jetzt Text zeichnen (fillText / strokeText), Schriftart und -größe über font setzen und Text horizontal (textAlign) und vertikal (textBaseline) ausrichten.

Im nächsten Kapitel zeichnen wir fertige Bilder auf das Canvas. 🖼️

→ Weiter zu Bilder

← Zurück zur Canvas-Übersicht