Text und Bilder auf Canvas

Setzen Sie die Schriftart: ctx.font = "bold 24px sans-serif". Zeichnen Sie: ctx.fillText("Hello", x, y) oder ctx.strokeText("Hello", x, y). Die y-Koordinate ist die Textgrundlinie – addieren Sie die Höhe der Oberlängen darüber, um Text innerhalb einer Begrenzungsbox korrekt zu positionieren.

ctx.textAlign steuert die horizontale Ausrichtung: "left" (Standard), "center", "right". ctx.textBaseline steuert die vertikale Ausrichtung relativ zu y: "top", "middle", "alphabetic" (Standard), "bottom". Für zentrierten Text setzen Sie beide Werte auf "center" und "middle".

ctx.measureText("text") gibt ein TextMetrics-Objekt mit Breite und Schriftmetriken zurück. Verwenden Sie es, um Textpositionen dynamisch zu berechnen – etwa zum Zentrieren von Text in einer Box, zum Umbrechen von Text bei einer maximalen Breite oder zum rechtsbündigen Ausrichten von Beschriftungen neben Datenpunkten.

Canvas bietet keine integrierte Funktion zum Umbrechen von Text. Implementieren Sie sie: Messen Sie die Breiten der Wörter, addieren Sie sie, bis die maximale Breite überschritten wird, und beginnen Sie dann in Abständen von lineHeight eine neue Zeile. Dies ist eine häufig verwendete Hilfsfunktion in Canvas-Rendering-Bibliotheken.

ctx.drawImage(image, dx, dy) zeichnet ein HTMLImageElement, HTMLCanvasElement oder HTMLVideoElement an der Position (dx, dy). Laden Sie das Bild zuerst und zeichnen Sie es in seinem onload-Handler, damit die Pixel vor dem Zeichnen verfügbar sind.

ctx.drawImage(image, dx, dy, dw, dh) skaliert das Bild so, dass es in dw x dh passt. Das Seitenverhältnis wird nicht automatisch beibehalten – berechnen Sie die Abmessungen manuell. Um das Seitenverhältnis beizubehalten: dw = img.width * scale; dh = img.height * scale.

drawImage mit neun Argumenten: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). Das Quellrechteck (sx, sy, sw, sh) schneidet einen Bereich aus dem Bild aus; das Zielrechteck (dx, dy, dw, dh) platziert und skaliert den Ausschnitt auf dem Canvas.

ctx.imageSmoothingEnabled = false deaktiviert die bilineare Interpolation beim Skalieren von Bildern. Verwenden Sie dies für Pixelgrafiken, bei denen eine scharfe, nicht geglättete Skalierung gewünscht ist. Lassen Sie die Funktion für Fotos aktiviert (Standard), da dort eine weiche Skalierung besser aussieht.

Übergeben Sie ein Canvas als Quelle an drawImage, um ein Canvas auf ein anderes zu rendern. Dies ermöglicht Offscreen-Rendering: Zeichnen Sie komplexe Kompositionen auf ein verborgenes Canvas und zeichnen Sie dieses anschließend in jedem Frame mit einem einzigen Vorgang auf das sichtbare Canvas.

ctx.globalAlpha (0 bis 1) wendet eine einheitliche Transparenz auf alle nachfolgenden Zeichenoperationen an. ctx.globalCompositeOperation steuert, wie neue Zeichnungen mit vorhandenen Pixeln verrechnet werden: "source-over" (Standard), "multiply", "screen", "destination-out" (Löschen) und weitere.

canvas.toDataURL("image/png") exportiert das Canvas als Base64-PNG-Daten-URL. Verwenden Sie dies für einen vom Benutzer initiierten Download: Erstellen Sie einen Anker, setzen Sie href auf die Daten-URL und das download-Attribut auf einen Dateinamen und lösen Sie anschließend programmgesteuert einen Klick aus.

Was bewirkt ctx.textBaseline = "middle" beim Zeichnen von Text?

Beim Rendern von Canvas-Text werden ctx.font, fillText/strokeText, textAlign und textBaseline zur Positionierung sowie measureText für Layoutberechnungen verwendet. Das Zeichnen von Bildern mit drawImage unterstützt Skalieren und Zuschneiden; globalAlpha und globalCompositeOperation steuern die Verrechnung. Mit toDataURL kann das Canvas für Downloads oder zur weiteren Verwendung exportiert werden.