Einstieg in Canvas

Februar 2023

Canvas: Grafiken innerhalb von HTML erstellen

HTML

Dazu verwendet der Browser das Element canvas als Zeichenfläche. Über die Attribute width und height bestimmen wir die Abmessungen der Grafik. 
  <canvas id="leinwand" width="200" height="120">
    <div>
      Dieser Inhalt wird nur dann angezeigt,
      wenn der Browser canvas nicht unterstützt.
    </div>
  </canvas>
Die Fläche wird jetzt bereits vom Browser freigehalten.

CSS

Mit CSS kann das Element canvas gestylt werden, womit in unseren Beispielen wegen der besseren Sichtbarkeit ein roter Rahmen eingestellt sowie ein weißer Hintergrund gesetzt wird. 
  <style>
      #leinwand { 
        border: 1pt solid red; 
        background-color: #fff;
      }
  </style>
Die Fläche beinhaltet bereits jetzt eine leere Grafik. Versucht man, diese über die rechte Maustaste zu speichern, dann erhält man eine Bilddatei im PNG-Format.
Die Vorbereitungen wären damit abgeschlossen, das eigentliche Erstellen der Grafik geschieht mithilfe von JavaScript.

JavaScript

Zunächst greifen wir mit getElementById auf das Canvas-Element zu und erhalten ein recht komplexes Objekt, im Beispiel in der Variablen myCanvas. Das Element enthält die Methode getContext(), von der wir einen sogenannten Zeichenkontext erhalten. Im Beispiel ist es die Variable Ctx2d. 
<script>
  // zuerst das canvas-Element finden
  let myCanvas = document.getElementById('leinwand'); 
  // gibt es die Methode dann existiert die Canvas
  if(myCanvas.getContext)
  {
    // Jetzt Zeichenkontext holen
    let Ctx2d = myCanvas.getContext('2d');

//  ... hier folgt die eigentliche Grafik-Programmierung ...

  }
</script>
Das Argument '2d' bei getContext() bewirkt, dass ein CanvasRenderingContext2D-Objekt zurückgegeben wird; eine API, mit dem 2D-Grafiken erstellt werden können. Dieser Zeichenkontext wird von den meisten Browsern unterstützt und genau damit befassen wir uns in diesem Beitrag.

Hilfen im Internet

Man findet im Internet ausführliche Anleitungen im Umgang mit Canvas, weiter unten nur einige wesentliche Quellen. Unser Beitrag ist kein weiteres Tutorial mit demselben Inhalt. Wir lenken mit einigen Beispielen die Aufmerksamkeit eher auf die Philosophie im Umgang mit Canvas und auf Zusammenhänge, die nicht sofort offensichtlich sind und manchmal auch missverständlich sein können.
https://html.spec.whatwg.org/multipage/canvas.html
Das ist die Spezifikation zu Canvas.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
Ausführliche Dokumente zum CanvasRenderingContext2D-API
http://canvas.quaese.de/
Canvas und 2D-Zeichenkontext in Deutsch und ausreichend umfassend.