Canvas API

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

Die Methode Document.getElementById() erhält eine Referenz zum HTML-<canvas>-Element. Anschließend wird mit der Methode HTMLCanvasElement.getContext() der Kontext dieses Elements abgerufen – das Objekt, auf das die Zeichnung gerendert wird.

Das eigentliche Zeichnen erfolgt mit der Schnittstelle CanvasRenderingContext2D. Die Eigenschaft fillStyle färbt 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 Tutorial

Ein umfassendes Tutorial, das sowohl die grundlegende Nutzung der Canvas API als auch ihre erweiterten Funktionen behandelt.

HTML5 Canvas Deep Dive

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

Canvas Handbook

Ein nützliches Nachschlagewerk für die Canvas API.

Manipulieren von Videos mit Canvas

Kombination von <video> und <canvas> zur Manipulation von Videodaten in Echtzeit.

Die Canvas API ist äußerst mächtig, jedoch nicht immer einfach zu nutzen. 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 Erfahrungen erleichtert.
• Fabric.js ist eine Open-Source-Canvas-Bibliothek mit SVG-Parsing-Fähigkeiten.
• 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 Mobilanwendungen.
• p5.js bietet eine vollständige Palette an Canvas-Zeichenfunktionen für Künstler, Designer, Pädagogen und Anfänger.
• Paper.js ist ein Open-Source-Framework zur Vektorgrafikprogrammierung, das auf dem HTML-Canvas läuft.
• Phaser ist ein schnelles, kostenloses und unterhaltsames Open-Source-Framework für Canvas- und WebGL-basierte Browserspiele.
• Pts.js ist eine Bibliothek für kreatives Codieren und Visualisierungen in Canvas und SVG.
• Rekapi ist eine Animations-Keyframing-API für Canvas.
• Scrawl-canvas ist eine Open-Source-JavaScript-Bibliothek zum Erstellen und Manipulieren von 2D-Canvas-Elementen.
• Das ZIM Framework bietet Annehmlichkeiten, Komponenten und Steuerungen für kreatives Codieren auf dem Canvas – beinhaltet Barrierefreiheit und hunderte von bunten Tutorials.
• Sprig ist eine anfängerfreundliche, Open-Source, kachelbasierte Spieleentwicklungsbibliothek, die Canvas verwendet.

• WebGL