Web Development

Zeichnen im Canvas

Der Canvas-Tag stellt eine rechteckige Zeichenfläche zur Verfügung. Es handelt sich dabei um eine Matrix von Pixeln. Wenn man Vektor-Grafik braucht muss man SVG statt dessen verwenden.

Der Canvas wird durch zwei Objekte in Javascript repräsentiert: ein Canvas-Objekt und ein Context-Objekt. Zuerst müssen wir diese beiden Objekte finden und in Variablen speichern:

let my_canvas = document.getElementById("c");
let my_context = my_canvas.getContext("2d");

Wir verwenden erst einmal die 2-dimensionale Zeichenfläche des Canvas. Wenn Sie mehr von Computergrafik verstehen können Sie auch die 3d-Version, genannt „webgl“ verwenden.

Eine gute Möglichkeit Canvas auszuprobieren ist dieses jsfiddle.

Die Darstellung des Canvas funktioniert erst mal nur bei einem devicePixelRatio von 1 gut. Für höhere Pixeldichte muss man die Größe des Canvas extra setzen:

  let canvas = document.getElementById(id);
  let ctx = canvas.getContext("2d");

  let scale = window.devicePixelRatio;
  console.log(`creating a canvas with ${canvas_width} x ${canvas_height} css pixels at devicePixelRatio ${window.devicePixelRatio}`);

  // set canvas.width to real pixels - will never be used again!
  canvas.width = canvas_width * scale;
  canvas.height = canvas_height * scale;
  ctx.scale(scale,scale)

  // set style.width to virtual pixels, we will work with virtual pixels from now on
  canvas.style.width = canvas_width + "px";
  canvas.style.height = canvas_height + "px";

Achsenparallelle Rechtecke zeichnet man mit fillRect:

my_context.fillRect(50, 50, 20, 20);

Linien ziehen kann man mit moveTo (den Zeichenstift bewegen) und lineTo (eine linie von der aktuellen Position zur angegeben Position ziehen). Die Linie erscheint erst, wenn man die abschließende Stroke-Methode aufruft:

my_context.moveTo(10, 20);
my_context.lineTo(10, 50);
my_context.strokeStyle = "#4a4";
my_context.stroke();

Text auf den Canvas schreiben kann man mit dem fillText-Befehl:

my_context.font = "bold 12px sans-serif";
my_context.fillText("hier bin ich", 10, 50);

Bilder die sich bereits in der Webseite befinden kann man in den Canvas kopieren:

let cat = document.getElementById("cat");
my_context.drawImage(cat, 0, 0);

Man kann ganz neue Bilder laden. Achtung: da das Laden eines Bildes einige Zeit dauert verwenden wir hier das onload Event: erst wenn das Bild fertig geladen ist wird es in den Canvas kopiert:

let cat = new Image();
cat.src = "images/cat.png";
cat.onload = function() {
  my_context.drawImage(cat, 0, 0);
};

Diese Beispiel zu Canvas stammen alle aus dem Canvas-Kapitel von Mark Pilgrims „Dive into HTML5“.