HTML Academy · Lektion

Canvas und 2D-Kontext einrichten

Erstellen Sie ein canvas-Element und rufen Sie den 2D-Renderingkontext ab

Canvas und 2D-Kontext einrichten ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Das canvas-Element

Das <canvas>-Element ist eine zeichenbare Bitmap-Fläche im Browser:

<canvas id="myCanvas" width="800" height="400">
  <!-- Fallback for browsers without canvas support -->
  <p>Your browser does not support HTML5 Canvas.</p>
</canvas>

Attribute für Breite und Höhe

Legen Sie die Abmessungen von canvas immer über HTML-Attribute und nicht über CSS fest:

<!-- CORRECT: set intrinsic size via attributes -->
<canvas width="800" height="400"></canvas>

<!-- WRONG: CSS changes display size but not canvas resolution -->
<canvas style="width: 800px; height: 400px;"></canvas>
<!-- This stretches a default 300x150 canvas to 800x400
     Result: blurry graphics -->

Den 2D-Kontext abrufen

Rufen Sie den 2D-Rendering-Kontext zum Zeichnen ab:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// ctx is a CanvasRenderingContext2D object
// All drawing operations are methods on ctx

// Check browser support:
if (!canvas.getContext) {
  console.error('Canvas not supported');
}

Koordinatensystem

Das Koordinatensystem von canvas beginnt oben links:

// (0, 0) = top-left corner
// (width, 0) = top-right
// (0, height) = bottom-left
// (width, height) = bottom-right

// For a 800x400 canvas:
// x increases left → right (0 to 800)
// y increases top → bottom (0 to 400)
//
// Example: draw at center:
ctx.fillRect(400, 200, 10, 10);  // centered dot

Canvas-Zustand

canvas verfügt über einen Zeichenstatus, der gespeichert und wiederhergestellt werden kann:

ctx.save();       // push current state onto a stack

// Change state:
ctx.fillStyle = 'red';
ctx.globalAlpha = 0.5;

// Draw with modified state...
ctx.fillRect(100, 100, 200, 200);

ctx.restore();    // pop state: back to pre-save settings

Canvas leeren

Leeren Sie das gesamte canvas vor dem erneuten Zeichnen (für Animationen):

// Clear entire canvas:
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Or with a background color:
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

fillStyle und strokeStyle

Legen Sie Farben für Füll- und Strichoperationen fest:

ctx.fillStyle = 'blue';                    // CSS color name
ctx.fillStyle = '#ff6600';                 // hex color
ctx.fillStyle = 'rgb(255, 100, 0)';       // rgb
ctx.fillStyle = 'rgba(255, 100, 0, 0.5)'; // rgba with alpha
ctx.fillStyle = gradient;                  // gradient object
ctx.fillStyle = pattern;                   // pattern object

ctx.strokeStyle = '#333333';               // border color

lineWidth und weitere Style-Eigenschaften

Eigenschaften für Striche und Linien:

ctx.lineWidth = 4;           // stroke width in pixels
ctx.lineCap = 'round';       // butt | round | square
ctx.lineJoin = 'round';      // miter | round | bevel
ctx.setLineDash([5, 3]);     // dashed line: 5px dash, 3px gap
ctx.globalAlpha = 0.8;       // transparency for all drawing
ctx.globalCompositeOperation = 'multiply'; // blend modes

Responsives HiDPI-Canvas

Beheben Sie ein verschwommenes canvas auf Retina-/HiDPI-Displays:

function setupHiDPI(canvas, width, height) {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  canvas.style.width = width + 'px';
  canvas.style.height = height + 'px';
  const ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);  // scale all drawing
  return ctx;
}

Canvas im Vergleich zu SVG

Wann Sie canvas oder SVG wählen sollten:

Canvas – Bitmap, Pixel für Pixel, ideal für Spiele, große Datenvisualisierungen und Bildverarbeitung
SVG – Vektor, skalierbar, ideal für Logos, Symbole, Diagramme mit interaktiven Elementen und Barrierefreiheit

Barrierefreiheit bei Canvas

Canvas bietet keine integrierte Barrierefreiheit – fügen Sie sie manuell hinzu:

<canvas
  id="chart"
  width="800"
  height="400"
  aria-label="Bar chart showing Q1-Q4 revenue growth"
  role="img"
>
  <!-- Fallback for non-canvas browsers and screen readers -->
  <table><!-- accessible data table --></table>
</canvas>

Kurze Überprüfung

Wie ruft man den Zeichenkontext eines canvas korrekt ab?

Zusammenfassung: Canvas-Einrichtung

Das Wichtigste zur Canvas-Einrichtung:

Breite und Höhe über HTML-Attribute und nicht über CSS festlegen
canvas.getContext('2d') – den Zeichenkontext abrufen
Ursprung oben links (0,0); x→rechts, y→unten
ctx.save() / ctx.restore() – stapelbasierte Zustandsverwaltung
Für eine scharfe Darstellung auf Retina-Displays mit devicePixelRatio skalieren

Häufig gestellte Fragen

Ist die Lektion „Canvas und 2D-Kontext einrichten“ kostenlos?

Ja — der vollständige Text von „Canvas und 2D-Kontext einrichten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Canvas und 2D-Kontext einrichten“?

Erstellen Sie ein canvas-Element und rufen Sie den 2D-Renderingkontext ab Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Canvas und 2D-Kontext einrichten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu HTML Academy