≡

Canvas

Canvas: Grafiken innerhalb von HTML erstellen

Das Element <canvas></canvas> in einer HTML-Seite ist eine Oberfläche zum Zeichnen von Grafiken (Bitmap). Die Grafik kann man per Rechts-Mausklick im Browser als png-File downloaden.

Das Werkzeug zum Zeichnen ist JavaScript im Zusammenhang mit der Canvas-API. Man braucht also nur einen Browser und keine besondere Grafiksoftware. Zum Kennlernen bietet der Einstieg in Canvas einige einführende Beispiele.

Wie bei jeder Software gibt es auch beim Programmieren in der Canvas die eine oder andere Überraschung bzw. Besonderheit. Die Abschnitte nach dem Einstieg widmen sich solchen speziellen Themen.

Das reguläre Einbinden des canvas-Elements in den HTML-Code

Zur Demonstration erstellen wir eine einfache HTML-Seite die wir als Datei speichern; z.B. als Canvas-00.html.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas-Experimente</title>
<style>
  /* hier haben CSS-Styles Platz */
  canvas { border: 1pt solid red; }
</style>

<script>
'use strict';
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    // hier kommen unsere JavaScript-Anweisungen hin
  }
}
</script>
</head>

<body>
  <!-- HTML-Code -->

  <h3>Canvas</h3>
  <canvas id="leinwand" width="200" height="200"></canvas>
</body>

Im Browser geöffnet sehen wir die Überschrift und entsprechend dem Styling die Canvas als leeres Quadrat, rot umrandet. Diese Datei nehmen wir als Grundlage für die folgenden Beispiele. (Datei zum Ansehen und Download).