Das HTML5 <canvas>-Element dient zum Zeichnen von Grafiken per Skript (meist JavaScript). Alle Eigenschaften und Methoden für Canvas im Überblick.
Das HTML5-Element <canvas> wird zum Zeichnen von Grafiken per Skript (üblicherweise JavaScript) verwendet. Das <canvas>-Element selbst ist nur ein leerer Container — gezeichnet wird darin ausschließlich über ein Skript.
Um zeichnen zu können, ruft man die Methode getContext('2d') des Elements auf. Sie gibt ein CanvasRenderingContext2D-Objekt zurück:
Fast alle Eigenschaften und Methoden auf dieser Seite gehören zu diesem 2D-Kontextobjekt (ctx im Beispiel oben), nicht zum <canvas>-Element selbst. Die beiden Ausnahmen sind getContext() und toDataURL(), die zum <canvas>-Element gehören, sowie die Eigenschaften width, height und data im Abschnitt Pixelmanipulation, die zu ImageData-Objekten gehören. Diese sind jeweils in eigenen Abschnitten gruppiert.
Legt die Farbe, den Verlauf oder das Muster zum Füllen der Formen fest, oder gibt dieses zurück.
strokeStyle
Legt die Farbe, den Verlauf oder das Muster für die Linien um die Formen fest, oder gibt dieses zurück.
shadowColor
Legt die Farbe der Schatten fest, oder gibt diese zurück.
shadowBlur
Legt den Unschärfegrad der Schatten fest, oder gibt diesen zurück.
shadowOffsetX
Legt den x-Versatz des Schattens fest, oder gibt diesen zurück.
shadowOffsetY
Legt den y-Versatz des Schattens fest, oder gibt diesen zurück.
Methode
Beschreibung
createLinearGradient()
Erstellt einen linearen Verlauf für die Verwendung im Canvas-Inhalt.
createPattern()
Wiederholt ein bestimmtes Element in der angegebenen Richtung.
createRadialGradient()
Erstellt einen kreisförmigen/radialen Verlauf für die Verwendung im Canvas-Inhalt.
addColorStop()
Definiert Farben und Stoppositionen im Verlaufsobjekt.
Das Tutorial Canvas-Verläufe enthält ausgearbeitete Beispiele.
Linienstile
Eigenschaft
Beschreibung
lineCap
Legt den Stil der Linienenden fest, oder gibt diesen zurück.
lineJoin
Legt die Art der gezeichneten Ecken fest, oder gibt diese zurück.
lineWidth
Legt die Breite der aktuellen Linie fest, oder gibt diese zurück.
miterLimit
Legt die maximale Gehrungslänge fest, oder gibt diese zurück.
lineDashOffset
Legt den Versatz für Strichlinienmuster fest, oder gibt diesen zurück.
Methode
Beschreibung
getLineDash()
Gibt das aktuelle Strichlinienmuster als array von Zahlen zurück.
setLineDash()
Setzt das Strichlinienmuster aus einem array von Zahlen (z. B. [5, 3]).
Rechtecke
Methode
Beschreibung
rect()
Erstellt Rechtecke.
fillRect()
Zeichnet gefüllte Rechtecke.
strokeRect()
Zeichnet rechteckige Umrisse.
clearRect()
Löscht die angegebenen Pixel innerhalb eines bestimmten Rechtecks.
Pfade
Methode
Beschreibung
fill()
Füllt den/die aktuellen Teilpfad(e) mit dem aktuellen fillStyle.
stroke()
Zeichnet den/die aktuellen Teilpfad(e) mit dem aktuellen strokeStyle.
beginPath()
Beginnt einen neuen Pfad oder setzt den aktuellen Pfad zurück.
moveTo()
Verschiebt den Pfad zum angegebenen Punkt im Canvas, ohne eine Linie zu zeichnen.
closePath()
Fügt einen Pfad vom aktuellen Punkt zurück zum Startpunkt hinzu.
lineTo()
Fügt eine Linie zum aktuellen Teilpfad hinzu.
clip()
Erstellt eine Schnittmaske aus dem aktuellen Pfad.
quadraticCurveTo()
Fügt eine quadratische Bézierkurve hinzu.
bezierCurveTo()
Fügt eine kubische Bézierkurve hinzu.
arc()
Fügt einen Bogen/eine Kurve zum Erstellen von Kreisen oder Kreisabschnitten hinzu.
arcTo()
Fügt einen Bogen/eine Kurve zwischen zwei Tangenten hinzu.
ellipse()
Fügt einen elliptischen Bogen zum Pfad hinzu.
isPointInPath()
Gibt an, ob sich der angegebene Punkt im aktuellen Pfad befindet oder nicht.
Transformationen
Methode
Beschreibung
scale()
Vergrößert oder verkleinert die aktuelle Zeichnung.
rotate()
Dreht die aktuelle Zeichnung.
translate()
Passt das Koordinatensystem des Canvas an.
transform()
Wendet eine Transformationsmatrix auf das Canvas an.
setTransform()
Ähnelt transform(). Kann zum Verzerren, Skalieren und Verschieben des Canvas verwendet werden.
resetTransform()
Setzt die aktuelle Transformation auf die Einheitsmatrix zurück.
Unter Canvas-Koordinaten ist beschrieben, wie die Transformationsmatrix Zeichenpositionen auf Pixel abbildet.
Text
Eigenschaft
Beschreibung
font
Legt das Erscheinungsbild eines auf dem Canvas gezeichneten Textes fest.
textAlign
Legt die Ausrichtung eines auf dem Canvas gezeichneten Textes fest.
textBaseline
Legt die vertikale Ausrichtung eines auf dem Canvas gezeichneten Textes fest.
direction
Legt die Textrichtung fest oder gibt sie zurück (ltr, rtl oder inherit).
Methode
Beschreibung
fillText()
Fügt Text zum Canvas hinzu.
strokeText()
Fügt umrandeten Text zum Canvas hinzu.
measureText()
Misst die Textbreite.
Das Tutorial Canvas-Text enthält vollständige Beispiele.
Bildzeichnung
Eigenschaft
Beschreibung
imageSmoothingEnabled
Gibt an oder legt fest, ob skalierte Bilder geglättet (true) oder pixelig (false) dargestellt werden.
Methode
Beschreibung
drawImage()
Zeichnet ein Bild, Video oder Canvas auf das Canvas.
Pixelmanipulation
Die folgenden Eigenschaften gehören zum ImageData-Objekt, das von createImageData() / getImageData() zurückgegeben wird — nicht zum <canvas>-Element oder zum Kontext.
ImageData-Eigenschaft
Beschreibung
width
Gibt die Breite eines ImageData-Objekts in Pixeln zurück.
height
Gibt die Höhe eines ImageData-Objekts in Pixeln zurück.
data
Gibt ein Uint8ClampedArray mit den RGBA-Pixeldaten zurück.
Methode
Beschreibung
createImageData()
Erstellt ein neues ImageData-Objekt.
getImageData()
Gibt ein ImageData-Objekt zurück, das die Pixeldaten des angegebenen Rechtecks kopiert.
putImageData()
Überträgt die Bilddaten aus einem ImageData-Objekt auf das Canvas.
Compositing
Eigenschaft
Beschreibung
globalAlpha
Legt den aktuellen Alpha-/Transparenzwert fest, oder gibt diesen zurück.
globalCompositeOperation
Legt die Art der Compositing-Operation beim Zeichnen eines neuen Bildes fest, oder gibt diese zurück.
filter
Legt einen CSS-Filter für das Zeichnen fest oder gibt ihn zurück (z. B. blur(4px), grayscale(1)).
Canvas-Zustand
Diese Methoden gehören zum 2D-Kontext und ermöglichen das Speichern und Wiederherstellen des vollständigen Zeichenzustands (Stile, Transformationen, Schnittbereich) als Stack.
Methode
Beschreibung
save()
Legt den aktuellen Zustand des Kontexts auf den Zustandsstack.
restore()
Nimmt den zuletzt gespeicherten Zustand vom Stack und stellt die zugehörigen Stile und Transformationen wieder her.
Das <canvas>-Element
Die folgenden Member gehören zum <canvas>-Element selbst, nicht zum 2D-Kontext.
Member
Beschreibung
getContext()
Gibt einen Zeichenkontext für das Canvas zurück — '2d' übergeben für ein CanvasRenderingContext2D.
toDataURL()
Gibt eine Data-URL (Base64-Bild) des Canvas-Inhalts zurück, z. B. 'image/png'.
Übungen
Übung
Was kann die Methode getContext('2d') in HTML5 Canvas tun?