Dokumentation (canvas.quaese.de)

Schnittstellen/Objekte - CanvasRenderingContext2D

Es kann nur ein CanvasRenderingContext2D-Objekt in einem canvas geben, das über die Methode getContext referenziert wird.

Der 2D-Kontext repräsentiert eine karthesische Oberfläche, deren Ursprung (0,0) sich an der linken oberen Ecke befindet. Die x-Werte werden in die rechte Richtung erhöht, die y-Werte nach unten.

Attribute und Methoden

Canvas-Zustand

save - (Methode) Speichert einen Zustand des Kontextes auf dem Stack
restore - (Methode) Stellt den letzten Zustand vom Stack wieder her (existiert kein Zustand -> keine Veränderung)

Transformationen

scale - (Methode) Skaliert den Inhalt des Kontextes
rotate - (Methode) Drehung des Inhalts
translate - (Methode) Verschieben des Inhalts
transform - (Methode) multipliziert die aktuelle Transformationsmatrix (mit Parameterwerte)
setTransform - (Methode) setzt die aktuelle Transformationsmatrix (auf Parameterwerte)

Rechtecke

clearRect - (Methode) Löscht den Inhalt eines Rechtecks (beschrieben durch die Parameter)
fillRect - (Methode) Füllt den Inhalt eines Rechtecks (beschrieben durch die Parameter)
strokeRect - (Methode) Zeichnet die Umfanglinien eines Rechtecks (beschrieben durch die Parameter)

Pfad-Schnittstelle

beginPath - (Methode) Löscht die Liste aller Unterpfade (eines Kontextes)
closePath - (Methode) Schliesst einen Pfad
moveTo - (Methode) Erstellt einen neuen Unterpfad (Startpunkt aus Parametern)
lineTo - (Methode) Verbindet den Endpunkt eines bestehenen Unterpfads (aus der Liste des Kontextes) mit den übergebenen Koordinaten durch eine gerade Linie
quadraticCurveTo - (Methode) Verbindet den Endpunkt eines bestehenen Unterpfads (aus der Liste des Kontextes) mit den übergebenen Koordinaten durch eine quadratische Bezierkurve
bezierCurveTo - (Methode) Verbindet den Endpunkt eines bestehenen Unterpfads (aus der Liste des Kontextes) mit den übergebenen Koordinaten durch eine cubische Bezierkurve
arcTo - (Methode) Verbindet den Endpunkt eines bestehenen Unterpfads (aus der Liste des Kontextes) mit den übergebenen Koordinaten abhängig vom letzten Punkt des Unterpfads
rect - (Methode) Erstellt einen neuen geschlossenen Rechteck-Pfad
arc - (Methode) Zeichnet einen Bogen bezüglich der übergebenen Parameter
fill - (Methode) Füllt einen Pfad
stroke - (Methode) Zeichnet alle Linien eines Pfades
clip - (Methode) Erstellt einen neuen Pfad als Schnittmenge aus dem Clipping-Pfad und dem aktuellen Arbeitspfad
isPointInPath - (Methode) Prüft, ob ein Punkt innerhalb eines Pfades liegt

Farben und Styles

strokeStyle - (Attribut) Farbe und/oder Style einer Linie
fillStyle - (Attribut) Farbe und/oder Style einer Füllung
createLinearGradient - (Methode) erstellt einen linearen Farbverlauf
createRadialGradient - (Methode) erstellt einen radialen Farbverlauf
createPattern - (Methode) erstellt ein Füllmuster in einem übergebenen Bild
createPattern - (Methode) erstellt ein Fullmuster im Canvas-Element

Linien-Methoden

lineWidth - (Attribut) setzt die Linienstärke
lineCap - (Attribut) legt die Enden einer Linie fest ("butt", "round", "square")
lineJoin - (Attribut) legt den Verbindungstyp zwischen zwei Linien fest ("round", "bevel", "miter")
miterLimit - (Attribut) maximal zulässige Gehrungslänge (= Quotient aus Gehrungslänge und Strichbreite)

Schatten

shadowOffsetX - (Attribut) horizontaler Abstand des Schattens
shadowOffsetY - (Attribut) vertikaler Abstand des Schattens
shadowBlur - (Attribut) Unschärfe des Schattens
shadowColor - (Attribut) Schattenfarbe

Verknüpfungen (Mischen)

globalAlpha - (Attribut) Transparenzwerte (float von 0.0 .. 1.0) für Formen und Bilder
globalCompositeOperation - (Attribut) Methode, mit der eine Form oder ein Bild in den Kontext gesetzt wird (addieren, multiplizieren usw.)

Bilder zeichnen

drawImage - (Methode) überladene Methode, die in ein Bild oder den Kontext zeichnet

Pixel-Manipulation

getImageData - (Methode) Liefert die Pixeldaten des durch die Parameter beschriebenen Rechtecks
putImageData - (Methode) Fügt Bildinformationen in den Kontext ein