JavaScript/Canvas

Mit dem CanvasRenderingContext2D-Interface können Sie Grafiken erzeugen und animieren, die dann auf der Zeichenfläche des canvas-Elements dargestellt werden.

• 
• 
• 
• 
• 
• 

• Formen und Pfade
• Stile und Farben (Füllungen, Linien und Schatten)
• Bilder
• Text
• Transformationen
• Pixel Manipulation
• Animation
• Hit Regions

• JavaScript/Path2D
  • Einbindung von SVG-Pfaddaten

• JavaScript/Tutorials
  • Color Picker
  • Funktionsplotter

Zeichnungen und Animationen erstellen

Die Implementierung der Canvas-Zeichenoberfläche ähnelt der GUI (Graphics User Interface) von Microsoft Windows und lässt sich formal in folgende Schritte aufteilen:

1. Jedes Mal, wenn der Inhalt der Canvas neu gezeichnet werden soll, muss eine zu diesem Zweck entworfene Funktion manuell entweder innerhalb einer anderen Funktion oder durch einen Event-Handler wie z. B. load, DOMContentLoaded oder click aufgerufen werden.

   Beachten Sie, dass anderenfalls kein Inhalt in das canvas-Element gezeichnet wird; es wird keine Funktion von selbst aufgerufen, weder beim Laden der Seite noch sonst irgendwann.

2. Innerhalb der Funktion muss zu Beginn ein sogenanntes Context-Objekt angefordert werden. Dieses Objekt fungiert als eine Schnittstelle und stellt Funktionen zum Zeichnen von Linien, Rechtecken, Kreisen, Bögen, Texten, Bildern, ... bereit. Dabei hängt der konkrete Umfang an Funktionen und deren Benennung vom Typ des Context-Objekts ab. So gibt es zum Beispiel ein Context-Objekt zur Zeichnung von zweidimensionalen Figuren als auch eines für das Arbeiten mit 3D-Objekten. Die nachfolgenden Artikel beschränken sich jedoch lediglich auf das 2D-Context-Objekt vom Typ 2d, alle vorgestellten Funktionen und Membervariablen beziehen sich auf diesen Kontext.
3. Als Erstes sollte die Oberfläche der Canvas mithilfe einer dementsprechenden Context-Funktion geleert werden. Dies verhindert, dass nach dem Zeichnen noch Überreste des Vorgängerinhalts zu sehen sind.
4. Nun kann die eigentliche Zeichenarbeit beginnen. Dabei sollte darauf geachtet werden, dass eventuelle Farbangaben, zum Beispiel die Füll- oder Rahmenfarbe eines Rechtecks, den eigentlichen Zeichenfunktionen nicht als Argument übergeben, sondern in zentralen Membervariablen abgespeichert und dann bei Bedarf durch diese Funktionen ausgelesen werden. Dies bedeutet, dass vor dem Aufrufen derartiger Funktionen unter Umständen die jeweiligen Membervariablen auf den gewünschten Wert gesetzt werden müssen, um das entsprechende Resultat zu erhalten.

Beispiel

function drawCanvas() {
  var element = document.getElementById('mycanvas');
        
  if(element.getContext)
  {
    var context = element.getContext('2d');
  }
}

In diesem Beispiel wird die JavaScript-Funktion drawCanvas deklariert, deren Aufgabe es ist, den Zeichenbereich des Elements mycanvas mit Inhalt zu füllen. Hierzu wird zuerst das Canvas-Objekt mithilfe dieser ID ermittelt und in der Variable element gespeichert. Danach wird mittels if(element.getContext) geprüft, ob das Canvas-Objekt eine Membervariable mit dem Namen getContext besitzt. Ist dies der Fall, so handelt es sich um einen Canvas-fähigen Browser und die eigentliche Programmierung kann beginnen.

Dazu wird die eben geprüfte Eigenschaft getContext (es handelt sich dabei um ein function-Objekt) mit dem Argument 2d aufgerufen und der von ihr zurückgegebene Wert in der Variable context abgespeichert. Die Funktion getContext erstellt dabei ein Context-Objekt, dessen Typ durch den ersten Parameter spezifiziert wird, in unserem Beispiel ist er also 2d.

Neben diesem Typ existiert außerdem noch webgl, sein Context-Objekt stellt Funktionen zum Erstellen, Darstellen und Arbeiten mit 3D-Objekten zur Verfügung. Außerdem kann die Funktion auch noch weitere Argumente erhalten, sie hängen vom Typ des Context-Objekts ab und werden bei 2d nicht benötigt. Nachdem das Context-Objekt ermittelt wurde, kann die eigentliche Zeichenarbeit (Schritte 3 und 4) begonnen werden.

Beachten Sie, dass bei der Angabe des ersten Parameters auf Groß- und Kleinschreibung geachtet werden muss.

Formen und Pfade →

Siehe auch

• Vergleich: SVG vs. Canvas

Weblinks

• WHATWG: canvas-Element
• W3C: HTML Canvas 2D Context
• MDN: CanvasRenderingContext2D

Artikel:

• Webkrauts: Malen nach Zahlen
• simon.html5: HTML5 Canvas Cheat Sheet

Bibliotheken:

• drweb: HTML5-Canvas: Einfacher zeichnen mit „Fabric.js“

Demos:

• MDN: Demos of open web technologies

Tools:

• professorcloud: SVG to HTML5 Canvas Converter