CanvasRenderingContext2D

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Das CanvasRenderingContext2D-Interface stellt den 2D-Rendering-Context für die Zeichenoberfläche eines <canvas> zur Verfügung.

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

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

Sobald Sie die den Kontext der Zeichenoberfläche habe, können Sie darin zeichnen. Beispiel:

ctx.fillStyle = "rgb(200,0,0)";  
ctx.fillRect(10, 10, 55, 50);  

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

Rechtecke malen

Es gibt drei Methoden, die sofort Rechtecke auf das Bitmap 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()
Malt ein gefülltes Rechteck mit Startpunkt (x, y) und Größe (width, height) auf das Canvas.
CanvasRenderingContext2D.strokeRect()
Malt ein Rechteck mit Startpunkt (x, y) und Größe (width, height) mit aktuellem stroke style auf das Canvas.

Text darstellen

Die folgenden Methoden stellen Text auf dem Canvas dar. Siehe auch das TextMetrics - Objekt für 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, 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 zu manipulieren.

CanvasRenderingContext2D.beginPath()
Startet einen neuen Pfad, indem die Liste mit allen Unterpfaden geleert wird. Starte diese Methode, wenn du einen neuen Pfad starten willst.
CanvasRenderingContext2D.closePath()
Sorgt dafür, dass die Stiftspitze zum Start des aktuellen Unterpfades zurückwandert. Dabei zeichnet es vom aktuellen Punkt zum Anfang eine gerade Linie. Ausnahme: 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()
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 rendering context 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
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()
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
Bildglättungsmodus; wenn deaktiviert, werden Bilder beim Skalieren nicht geglättet.

The canvas state

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

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.

Hit regions

CanvasRenderingContext2D.addHitRegion()
Adds a hit region to the canvas.
CanvasRenderingContext2D.removeHitRegion()
Removes the hit region with the specified id from the canvas.
CanvasRenderingContext2D.clearHitRegions()
Removes all hit regions from the canvas.

Non-standard APIs

Most of these APIs are deprecated and will be removed in the future.

CanvasRenderingContext2D.clearShadow()
Removes all shadow settings like CanvasRenderingContext2D.shadowColor and CanvasRenderingContext2D.shadowBlur.
CanvasRenderingContext2D.drawImageFromRect()
This is redundant with an equivalent overload of drawImage.
CanvasRenderingContext2D.setAlpha()
Use CanvasRenderingContext2D.globalAlpha instead.
CanvasRenderingContext2D.setCompositeOperation()
Use CanvasRenderingContext2D.globalCompositeOperation instead.
CanvasRenderingContext2D.setLineWidth()
Use CanvasRenderingContext2D.lineWidth instead.
CanvasRenderingContext2D.setLineJoin()
Use CanvasRenderingContext2D.lineJoin instead.
CanvasRenderingContext2D.setLineCap()
Use CanvasRenderingContext2D.lineCap instead.
CanvasRenderingContext2D.setMiterLimit()
Use CanvasRenderingContext2D.miterLimit instead.
CanvasRenderingContext2D.setStrokeColor()
Use CanvasRenderingContext2D.strokeStyle instead.
CanvasRenderingContext2D.setFillColor()
Use CanvasRenderingContext2D.fillStyle instead.
CanvasRenderingContext2D.setShadow()
Use CanvasRenderingContext2D.shadowColor and CanvasRenderingContext2D.shadowBlur instead.
CanvasRenderingContext2D.webkitLineDash
Use CanvasRenderingContext2D.getLineDash() and CanvasRenderingContext2D.setLineDash() instead.
CanvasRenderingContext2D.webkitLineDashOffset
Use CanvasRenderingContext2D.lineDashOffset instead.
CanvasRenderingContext2D.webkitImageSmoothingEnabled
Use CanvasRenderingContext2D.imageSmoothingEnabled instead.
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.
CanvasRenderingContext2D.isContextLost()
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.

WebKit only

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

Gecko only

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

Prefixed APIs

CanvasRenderingContext2D.mozCurrentTransform
Sets or gets the current transformation matrix, see CanvasRenderingContext2D.currentTransform
CanvasRenderingContext2D.mozCurrentTransformInverse
Sets or gets the current inversed transformation matrix. 
CanvasRenderingContext2D.mozFillRule
The fill rule to use. This must be one of evenodd or nonzero (default).
CanvasRenderingContext2D.mozImageSmoothingEnabled
See CanvasRenderingContext2D.imageSmoothingEnabled.
CanvasRenderingContext2D.mozDash
An array which specifies the lengths of alternating dashes and gaps . Use CanvasRenderingContext2D.getLineDash() and CanvasRenderingContext2D.setLineDash() instead.
CanvasRenderingContext2D.mozDashOffset
Specifies where to start a dash array on a line. . Use CanvasRenderingContext2D.lineDashOffset instead.
CanvasRenderingContext2D.mozTextStyle
Introduced in in Gecko 1.9, deprecated in favor of the CanvasRenderingContext2D.font property.
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.
CanvasRenderingContext2D.mozMeasureText()
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use CanvasRenderingContext2D.measureText() instead.
CanvasRenderingContext2D.mozPathText()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
CanvasRenderingContext2D.mozTextAlongPath()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

Internal APIs (chrome-context only)

CanvasRenderingContext2D.asyncDrawXULElement()
Renders a region of a XUL element into the canvas.
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.
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

CanvasRenderingContext2D.msFillRule
The fill rule to use. This must be one of evenodd or nonzero (default).

Specifications

Specification Status Comment
WHATWG HTML Living Standard
Die Definition von 'CanvasRenderingContext2D' in dieser Spezifikation.
Lebender Standard  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.5 (1.8) 9 9 2
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ? ?

Compatibility notes

  • 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

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Aloso, aisnjo
 Zuletzt aktualisiert von: Aloso,