CanvasRenderingContext2D

Das CanvasRenderingContext2D-Interface stellt den 2D-Renderkontext für die Zeichenoberfläche eines <canvas> zur Verfügung. Es wird zum Zeichnen von Formen, Text, Bildern und anderen Objekten benutzt.

Eigenschaften und Methoden finden Sie in der Sidebar und weiter unten. Das Canvas-Tutorial bietet Ihnen außerdem weitere Informationen, Beispiele und Ressourcen.

Ein einfaches Beispiel

Um eine CanvasRenderingContext2D Instanz zu erhalten, muss man erst ein  HTML <canvas> Element haben, mit dem man arbeiten kann:

<canvas id="my-house" width="300" height="300"></canvas>

Um ein Objekt dieses Interfaces zu erhalten, benutzen Sie die Methode getContext() eines <canvas>, mit "2d" als Argument:

const canvas = document.getElementById('my-house');
const ctx = canvas.getContext('2d');

Sobald Sie den Kontext der Zeichenoberfläche haben, können Sie darin zeichnen, was immer Sie möchten. Dieser Code zeichnet ein Haus:

// Die Lininestärke festlegen
ctx.lineWidth = 10;

// Wand
ctx.strokeRect(75, 140, 150, 110);

// Tür
ctx.fillRect(130, 190, 40, 60);

// Dach
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

Die enstandene Zeichnung sieht so aus:

Referenz

Rechtecke zeichnen

Es gibt drei Methoden, die sofort Rechtecke innerhalb des Canvas zu zeichnen.

CanvasRenderingContext2D.clearRect()
Setzt alle Pixel im Rechteck mit Startpunkt (x, y) und Größe (width, height) auf schwarz und transparent wodurch jeglicher vorheriger Inhalt gelöscht wird.
CanvasRenderingContext2D.fillRect()
Zeichnet ein gefülltes Rechteck mit Startpunkt (x, y) und Größe (width, height).
CanvasRenderingContext2D.strokeRect()
Zeichnet ein Rechteck mit Startpunkt (x, y) und Größe (width, height), verwendet dabei den aktuellem stroke style.

Text darstellen

Die folgenden Methoden zeichnen Text auf dem Canvas. Siehe auch das TextMetrics - Objekt für die Texteigenschaften.

CanvasRenderingContext2D.fillText()
Zeichnet einen gegebenen Text (gefüllt) an die gegebene Position (x, y).
CanvasRenderingContext2D.strokeText()
Zeichnet einen gegebenen Text (Umrisse) an die gegebene Position (x, y).
CanvasRenderingContext2D.measureText()
Gibt ein TextMetrics-Objekt zurück.

Linienstile

Die folgenden Methoden und Eigenschaften beeinflussen die Art und Weise, wie Linien gezeichnet werden.

CanvasRenderingContext2D.lineWidth
Linienbreite. Standard: 1.0
CanvasRenderingContext2D.lineCap
Typ des Linienabschlusses. Mögliche Werte: butt (default), round, square.
CanvasRenderingContext2D.lineJoin
Definiert den Typ der Ecken, wo sich zwei Linien treffen. Mögliche Werte: round, bevel, miter (default).
CanvasRenderingContext2D.miterLimit
Verbindungsecken-Größe. Standard: 10.
CanvasRenderingContext2D.getLineDash()
Gibt das aktuelle Linienstrich-Array zurück, welches eine gerade Anzahl positiver Zahlen enthält.
CanvasRenderingContext2D.setLineDash()
Setzt das aktuelle Linienstrich-Array auf einen neuen Wert.
CanvasRenderingContext2D.lineDashOffset
Spezifiziert, wo auf einer Linie ein Strich-Array beginnt.

Textstile

Die folgenden Eigenschaften bestimmen, wie Text dargestellt wird.

CanvasRenderingContext2D.font
Font-Einstellung. Standard: 10px sans-serif
CanvasRenderingContext2D.textAlign
Ausrichtungs-Einstellung. Mögliche Werte: start (default), end, left, right oder center.
CanvasRenderingContext2D.textBaseline
Ausrichtungseinstellung zur Basislinie. Mögliche Werte: top, hanging, middle, alphabetic (default), ideographic, bottom.
CanvasRenderingContext2D.direction
Direktionalität. Mögliche Werte: ltr, rtl, inherit (default).

Füll- und Linienfarbe

Die Füllfarbe (fillStyle) wird innerhalb von Formen angewendet, die Linienfarbe (strokeStyle) auf die Randlinie von Formen. Beides kann statt einer Farbe auch ein Farbverlauf oder ein Muster sein.

CanvasRenderingContext2D.fillStyle
Farbe oder Stil für innerhalb von Formen. Standardwert #000 (schwarz).
CanvasRenderingContext2D.strokeStyle
Farbe oder Stil für die Randlinie von Formen. Standardwert #000 (schwarz).

Farbverläufe und Muster

CanvasRenderingContext2D.createLinearGradient()
Erzeugt einen linearen Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.
CanvasRenderingContext2D.createRadialGradient()
Erzeugt einen radialen (kreisförmigen) Farbverlauf entlang der Linie gegeben durch die Koordinaten, die als Parameter übergeben werden.
CanvasRenderingContext2D.createPattern()
Erzeugt ein Muster aus dem angegebenen Bild (ein CanvasImageSource). Es wiederholt das Bild in den Richtungen, die mit dem repetition Parameter definiert werden. Diese Methode gibt ein CanvasPattern zurück.

Schatten

CanvasRenderingContext2D.shadowBlur
Definiert den Unschärfe-Effekt. Standardwert 0
CanvasRenderingContext2D.shadowColor
Farbe des Schattens. Standardwert: komplett transparentes Schwarz.
CanvasRenderingContext2D.shadowOffsetX
Horizontale Entfernung des Schattens. Standardwert 0.
CanvasRenderingContext2D.shadowOffsetY
Vertikale Entfernung des Schattens. Standardwert 0.

Pfade

Die folgende Methoden können verwendet werden, um Pfade von Objekten zu manipulieren.

CanvasRenderingContext2D.beginPath()
Startet einen neuen Pfad, indem die Liste mit allen Unterpfaden geleert wird. Rufe diese Methode auf, wenn du einen neuen Pfad starten willst.
CanvasRenderingContext2D.closePath()
Sorgt dafür, dass die Stiftspitze zum Start des aktuellen Unterpfades zurückwandert. Es wird versucht eine greade Linie von der aktuellen Position zum Beginn der Linie zu zeichen. Wenn die Form schon geschlossen wurde oder nur einen Punkt enthält, macht diese Funktion nichts.
CanvasRenderingContext2D.moveTo()
Bewegt den Anfangspunkt für einen neuen Unterpfad zu den übergebenen (x, y) Koordinaten.
CanvasRenderingContext2D.lineTo()
Verbindet den letzten Punkt im Unterpfad mit den übergebenen (x, y) Koordinaten in einer geraden Linie.
CanvasRenderingContext2D.bezierCurveTo()
Fügt eine kubische Bézierkurve zum Pfad hinzu. Diese benötigt drei Punkte. Die ersten zwei sind Kontrollpunkte für die Krümmung, der dritte ist das Ende der Kurve. Die Kurve beginnt am letzten Punkt im aktuellen Pfad, dieser kann davor mit moveTo() geändert werden.
CanvasRenderingContext2D.quadraticCurveTo()
Fügt eine quadratische Bézierkurve zum aktuellen Pfad hinzu.
CanvasRenderingContext2D.arc()
Fügt einen Kreisbogen zum Pfad hinzu, mit Kreismittelpunkt (x, y) und Radius r. Der Startwinkel ist startAngle, der Endwinkel endAngle, Richtung gegen den Uhrzeigersinn.
CanvasRenderingContext2D.arcTo()
Fügt einen Kreisbogen zum Pfad mit den gegebenen Kontrollpunkten und Radius hinzu, verbunden mit dem letzten Punkt im Pfad durch eine gerade Linie.
CanvasRenderingContext2D.ellipse() This is an experimental API that should not be used in production code.
Fügt eine Ellipse zum Pfad hinzu, mit dem Zentrum (x, y) und den Radien radiusX und radiusY, beginnend bei startAngle und endend bei endAngle, Richtung gegen den Uhrzeigersinn.
CanvasRenderingContext2D.rect()
Erzeugt einen Pfad mit einem Rechteck an der Position (x, y) und den Dimensionen width und height.

Pfade zeichnen

CanvasRenderingContext2D.fill()
Füllt den Unterpfad mit der aktuellen Füllfarbe (bzw. Farbverlauf, Muster).
CanvasRenderingContext2D.stroke()
Zeichnet die Linien des Unterpfades mit der aktuellen Linienfarbe (bzw. Farbverlauf, Muster).
CanvasRenderingContext2D.drawFocusIfNeeded()
Wenn ein gegebenes Element fokussiert wird, zeichnet diese Methode einen Fokusring um den aktuellen Pfad.
CanvasRenderingContext2D.scrollPathIntoView()
Scrollt den aktuellen Pfad oder einen bestimmten Pfad in Sicht.
CanvasRenderingContext2D.clip()
Erzeugt einen zugeschnittenen Pfad aus den aktuellen Unterpfaden. Alles, was nach clip() gezeichnet wird, erscheint nur im zugeschnittenen Pfad. Für ein Beispiel, siehe  Clipping paths im Canvas Tutorial.
CanvasRenderingContext2D.isPointInPath()
Gibt zurück, ob der angegebene Punkt im aktuellen Pfad enthalten ist oder nicht.
CanvasRenderingContext2D.isPointInStroke()
Gibt zurück, ob der angegebene Punkt innerhalb des bemalten Bereichs im Pfad ist oder nicht.

Transformationen

Objekte im CanvasRenderingContext2D-Renderkontext haben eine aktuelle Transformationsmatrix und Methoden, um diese zu manipulieren. Die Transformationsmatrix wird angewendet, wenn der aktuelle Pfad erzeugt wird und wenn Text, Formen oder Path2D Objekte gemalt werden. Folgende Methoden sind hier für historische und Kompatibilitätszwecke aufgelistet, da heutzutage meistens SVGMatrix Objekte verwendet werden und in Zukunft diese Methoden ersetzen werden.

CanvasRenderingContext2D.currentTransform This is an experimental API that should not be used in production code.
Die momentane Transformationsmatrix (SVGMatrix object).
CanvasRenderingContext2D.rotate()
Fügt eine Drehung zur Transformationsmatrix hinzu. Der angle-Parameter stellt einen Drehwinkel im Uhrzeigersinn dar und wird in radians ausgedrückt.
CanvasRenderingContext2D.scale()
Fügt eine skalierende Transformation zu den Längeneinheiten des canvas hinzu (horizontal um Faktor x, vertikal um Faktor y). Was nach scale() auf das canvas gezeichnet wird, wird also dementsprechend gestaucht oder gestreckt.
CanvasRenderingContext2D.translate()
Fügt eine übersetzende Transformation hinzu, die die Position des canvas relativ zu seinem Koordinatensystem verschiebt (horizontal um x, vertikal um y). Was nach translate() gezeichnet wird, ist also um (x, y) verschoben.
CanvasRenderingContext2D.transform()
Multipliziert die aktuelle Transformationsmatrix mit der Matrix, die durch die Parameter dieser Funktion beschrieben wird.
CanvasRenderingContext2D.setTransform()
Setzt die aktuellen Transformationen zurück und ruft dann die transform() Methode mit den selben Parametern auf.
CanvasRenderingContext2D.resetTransform() This is an experimental API that should not be used in production code.
Setzt die aktuellen Transformationen zurück.

Compositing

CanvasRenderingContext2D.globalAlpha
Alpha-Wert bzw. Deckkraft, die auf alle Formen und Bilder angewendet wird, bevor diese auf dem canvas gezeichnet werden. Standardwert 1.0 (undurchsichtig).
CanvasRenderingContext2D.globalCompositeOperation
Zusammen mit globalAlpha legt dieser Wert fest, wie Formen und Bilder abhängig vom Hintergrund auf das canvas gezeichnet werden sollen.

Bilder zeichnen

CanvasRenderingContext2D.drawImage()
Zeichnet das übergebene Bild. Diese Methode ist in diversen Formaten verfügbar, wodurch sie große Flexibilität in der Nutzung bietet.

Pixelmanipulation

Siehe auch das ImageData Objekt.

CanvasRenderingContext2D.createImageData()
Erzeugt ein neues, leeres ImageData Objekt mit den angegebenen Dimensionen. Alle Pixel in diesem Objekt sind transparent schwarz.
CanvasRenderingContext2D.getImageData()
Gibt ein ImageData Objekt zurück, das die dem canvas zugrunde liegenden Pixeldaten enthält. Die Methode wird auf einen bestimmten Ausschnitt des canvas angewendet, beginnend bei (sx, sy), mit Breite sw und Höhe sh.
CanvasRenderingContext2D.putImageData()
Malt Pixeldaten des ImageData Objekts auf das canvas. Wenn ein dreckiges Rechteck angegeben wird, werden nur die Pixel dieses Rechtecks gemalt.

Bildglättung

CanvasRenderingContext2D.imageSmoothingEnabled This is an experimental API that should not be used in production code.
Bildglättungsmodus; wenn deaktiviert, werden Bilder beim Skalieren nicht geglättet.

Der Leinwand-Zustand

Der CanvasRenderingContext2D-Renderkontext enthält eine Vielzahl an Zeichnungszuständen (Attribute für Linienstile, Füllstile, Schattenstile, Textstile). Die folgenden Methoden helfen Ihnen mit diesen Zuständen zu arbeiten:

CanvasRenderingContext2D.save()
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
CanvasRenderingContext2D.restore()
Restores the drawing style state to the last element on the 'state stack' saved by save().
CanvasRenderingContext2D.canvas
A read-only back-reference to the HTMLCanvasElement. Might be null if it is not associated with a <canvas> element.

Trefferregionen

CanvasRenderingContext2D.addHitRegion() This is an experimental API that should not be used in production code.
Fügt eine Trefferregion (hit region) zur Leinwand hinzu.
CanvasRenderingContext2D.removeHitRegion() This is an experimental API that should not be used in production code.
Entfernt eine Trefferregion mit gegebener id von der Leinwand.
CanvasRenderingContext2D.clearHitRegions() This is an experimental API that should not be used in production code.
Entfernt alle Trefferregionen von der Leinwand.

Filter

This is an experimental API that should not be used in production code. CanvasRenderingContext2D.filter
Applies a CSS or SVG filter to the canvas, e.g., to change its brightness or bluriness.

Unstandardisierte APIs

Die meisten dieser APIs sind veraltet und wurden kurz nach Chrome 36 entfernt.

This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.clearShadow()
Entfernt alle Schatteneinstellungen wie  CanvasRenderingContext2D.shadowColor und CanvasRenderingContext2D.shadowBlur.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.drawImageFromRect()
Das ist redundant zum equivalenten Überladung von  drawImage.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.setAlpha()
Verwenden Sie CanvasRenderingContext2D.globalAlpha anstelle dieser Methode.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.setCompositeOperation()
Verwenden Sie CanvasRenderingContext2D.globalCompositeOperation anstelle dieser Methode.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.setLineWidth()
Verwenden Sie CanvasRenderingContext2D.lineWidth anstelle dieser Methode.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.setLineJoin()
Verwenden Sie CanvasRenderingContext2D.lineJoin anstelle dieser Methode.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.setLineCap()
Verwenden Sie CanvasRenderingContext2D.lineCap anstelle dieser Methode.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.setMiterLimit()
Verwenden Sie CanvasRenderingContext2D.miterLimit anstelle dieser Methode.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.setStrokeColor()
Verwenden Sie CanvasRenderingContext2D.strokeStyle anstelle dieser Methode.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.setFillColor()
Verwenden Sie CanvasRenderingContext2D.fillStyle anstelle dieser Methode.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.setShadow()
Verwenden Sie CanvasRenderingContext2D.shadowColor und CanvasRenderingContext2D.shadowBlur anstelle dieser Methode.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.webkitLineDash
Verwenden Sie CanvasRenderingContext2D.getLineDash() und CanvasRenderingContext2D.setLineDash() anstelle dieser Methode.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.webkitLineDashOffset
Verwenden Sie CanvasRenderingContext2D.lineDashOffset anstelle dieser Methode.
This API has not been standardized.   Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.webkitImageSmoothingEnabled
Verwenden Sie CanvasRenderingContext2D.imageSmoothingEnabled anstelle dieser Methode.
This API has not been standardized. CanvasRenderingContext2D.getContextAttributes()
Inspired by the same WebGLRenderingContext method it returns an Canvas2DContextAttributes object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (true by default) to indicate that transparency is used in the canvas.
This API has not been standardized. CanvasRenderingContext2D.isContextLost()
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.

WebKit only

This API has not been standardized. CanvasRenderingContext2D.webkitBackingStorePixelRatio
The backing store size in relation to the canvas element. See High DPI Canvas.
This API has not been standardized. CanvasRenderingContext2D.webkitGetImageDataHD
Intended for HD backing stores, but removed from canvas specifications.
This API has not been standardized. CanvasRenderingContext2D.webkitPutImageDataHD
Intended for HD backing stores, but removed from canvas specifications.

Gecko only

This API has not been standardized. CanvasRenderingContext2D.filter
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.

Prefixed APIs

This API has not been standardized. CanvasRenderingContext2D.mozCurrentTransform
Sets or gets the current transformation matrix, see CanvasRenderingContext2D.currentTransform
This API has not been standardized. CanvasRenderingContext2D.mozCurrentTransformInverse
Sets or gets the current inversed transformation matrix. 
This API has not been standardized. CanvasRenderingContext2D.mozFillRule
The fill rule to use. This must be one of evenodd or nonzero (default).
This API has not been standardized. CanvasRenderingContext2D.mozImageSmoothingEnabled
See CanvasRenderingContext2D.imageSmoothingEnabled.
This API has not been standardized. This deprecated API should no longer be used, but will probably still work. CanvasRenderingContext2D.mozDash
An array which specifies the lengths of alternating dashes and gaps . Use CanvasRenderingContext2D.getLineDash() and CanvasRenderingContext2D.setLineDash() instead.
This API has not been standardized. This deprecated API should no longer be used, but will probably still work. CanvasRenderingContext2D.mozDashOffset
Specifies where to start a dash array on a line. . Use CanvasRenderingContext2D.lineDashOffset instead.
This API has not been standardized. This deprecated API should no longer be used, but will probably still work. CanvasRenderingContext2D.mozTextStyle
Introduced in in Gecko 1.9, deprecated in favor of the CanvasRenderingContext2D.font property.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.mozDrawText()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use CanvasRenderingContext2D.strokeText() or CanvasRenderingContext2D.fillText() instead.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.mozMeasureText()
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use CanvasRenderingContext2D.measureText() instead.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.mozPathText()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
This API has not been standardized. Dies ist eine veraltete API und es wird nicht mehr garantiert, dass sie funktioniert. CanvasRenderingContext2D.mozTextAlongPath()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

Internal APIs (chrome-context only)

This API has not been standardized. CanvasRenderingContext2D.asyncDrawXULElement()
Renders a region of a XUL element into the canvas.
This API has not been standardized. CanvasRenderingContext2D.drawWindow()
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
This API has not been standardized. CanvasRenderingContext2D.demote()
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.

Internet Explorer

This API has not been standardized. CanvasRenderingContext2D.msFillRule
The fill rule to use. This must be one of evenodd or nonzero (default).

Specifications

Browser compatibility

BCD tables only load in the browser

  • Starting with Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), specifying invalid values are now silently ignored for the following methods and properties: translate(), transform(), rotate(), scale(), rect(), clearRect(), fillRect(), strokeRect(), lineTo(), moveTo(), quadraticCurveTo(), arc(), shadowOffsetX, shadowOffsetYshadowBlur.

See also