Canvas API

Dieses einfache Beispiel zeichnet ein grünes Rechteck auf eine Leinwand.

Die Methode Document.getElementById() erhält eine Referenz auf das HTML-<canvas>-Element. Anschließend ruft die Methode HTMLCanvasElement.getContext() den Kontext dieses Elements ab – das, worauf die Zeichnung gerendert wird.

Die eigentliche Zeichnung erfolgt über die Schnittstelle CanvasRenderingContext2D. Die Eigenschaft fillStyle macht das Rechteck grün. Die Methode fillRect() platziert die obere linke Ecke bei (10, 10) und gibt ihm eine Größe von 150 Einheiten Breite und 100 Höhe.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

• HTMLCanvasElement
• CanvasRenderingContext2D
• CanvasGradient
• CanvasPattern
• ImageBitmap
• ImageData
• TextMetrics
• OffscreenCanvas
• Path2D Experimentell
• ImageBitmapRenderingContext Experimentell

CanvasCaptureMediaStreamTrack ist eine verwandte Schnittstelle.

Canvas-Anleitung

Ein umfassender Leitfaden, der sowohl die grundlegende Nutzung der Canvas API als auch ihre erweiterten Funktionen abdeckt.

HTML5 Canvas Deep Dive

Eine praktische, buchlange Einführung in die Canvas API und WebGL.

Canvas-Handbuch

Ein praktisches Nachschlagewerk für die Canvas API.

Manipulation von Video mit Canvas

Kombination von <video> und <canvas>, um Videodaten in Echtzeit zu manipulieren.

Die Canvas API ist extrem leistungsfähig, aber nicht immer einfach zu verwenden. Die unten aufgeführten Bibliotheken können die Erstellung von canvas-basierten Projekten schneller und einfacher machen.

• EaselJS ist eine Open-Source-Canvas-Bibliothek, die das Erstellen von Spielen, generativer Kunst und anderen stark grafischen Erlebnissen einfach macht.
• Fabric.js ist eine Open-Source-Canvas-Bibliothek mit SVG-Parsing-Funktionalitäten.
• heatmap.js ist eine Open-Source-Bibliothek zur Erstellung von canvas-basierten Daten-Heatmaps.
• JavaScript InfoVis Toolkit erstellt interaktive Datenvisualisierungen.
• Konva.js ist eine 2D-Canvas-Bibliothek für Desktop- und mobile Anwendungen.
• p5.js bietet einen vollständigen Satz von Canvas-Zeichenfunktionen für Künstler, Designer, Pädagogen und Anfänger.
• Paper.js ist ein Open-Source-Vektorgrafik-Scripting-Framework, das auf dem HTML-Canvas läuft.
• Phaser ist ein schnelles, kostenloses und unterhaltsames Open-Source-Framework für canvas- und WebGL-basierte Browser-Spiele.
• Pts.js ist eine Bibliothek für kreative Codierung und Visualisierung in Canvas und SVG.
• Rekapi ist eine API zur Animation-Key-Framing für Canvas.
• Scrawl-canvas ist eine Open-Source-JavaScript-Bibliothek zur Erstellung und Manipulation von 2D-Canvas-Elementen.
• Das ZIM-Framework bietet Annehmlichkeiten, Komponenten und Steuerungen zur kreativen Programmierung auf der Leinwand – einschließlich Zugänglichkeit und hunderten von bunten Tutorials.
• Sprig ist eine anfängerfreundliche, open-source, kachelbasierte Spieleentwicklungsbibliothek, die Canvas verwendet.

• WebGL