Erste Schritte mit Canvas in JavaScript

Canvas ist ein spezielles Zeichenfeld im Browser mit JavaScript. Dieses Feld wird mit dem Tag <canvas> erstellt, dem man eine Breite und Höhe zuweisen sollte:

html<canvas width="200" height="200"></canvas>

Um mit diesem Feld in JavaScript zu arbeiten, müssen wir zunächst eine Referenz auf diesen Tag in einer Variable erhalten:

javascriptlet canvas = document.querySelector('canvas');

Anschließend muss auf diese Variable die Methode getContext angewendet werden:

javascriptlet canvas = document.querySelector('canvas');
let ctx    = canvas.getContext('2d');

Man kann es vereinfachen:

javascriptlet ctx = document.querySelector('canvas').getContext('2d');

Als Ergebnis wird in die Variable ctx ein Objekt geschrieben, das den sogenannten Ausführungskontext enthält. Das gesamte Zeichnen erfolgt mit den Methoden dieses Objekts. Deren Studium werden wir in den folgenden Lektionen behandeln.