Pixel und Größe

April 2025
Obwohl wir bereits gezeichnet haben, gehen wir einen Schritt zurück und befassen uns mit den Einstellungen der Canvas im HTML-Dokument. Zur Demonstration verwenden wir das Beispiel mit dem blauen Kreis.

300 x 150 ist Vorgabe

Wir haben etwas geändert, nämlich die Attribute width und height des canvas-Elements wurden entfernt. 
  <canvas id="leinwand"> 
  <div>
      Dieser Inhalt wird nur dann angezeigt,
      wenn der Browser canvas nicht unterstützt.
  </div>
  </canvas>
Es gelten jetzt die Vorgabewerte, nämlich 300 für width und 150 für height.
Das Beispiel mit automatisch vorgegebener Größe.

Grafikmaße definieren

Die Werte von height und width meinen Anzahl Pixel. Wir können über diese Attribute ganz beliebige Grafikmaße einstellen, z.B. 100x200. 
  <canvas id="leinwand" width="100" height="200"> 
  <div>
      Dieser Inhalt wird nur dann angezeigt,
      wenn der Browser canvas nicht unterstützt.
  </div>
  </canvas>
Die Lage und Größe der gezeichneten Objekte ändert sich dabei nicht, das ganze Image ist nur kleiner.
Das Beispiel mit anderen Maßen.

Dargestellte Größe der Canvas

Die Pixel der Canvas entsprechen exakt den Pixeln der Grafik, die von der Canvas dargestellt wird. Klickt man mit der rechten Maustaste auf die Canvas, kann man die Grafik als PNG herunterladen und beispielsweise mit einem Grafikprogramm genauer analysieren.
Für die weiteren Versuche stellen wir kleinere Maße ein: 
  <canvas id="leinwand" width="120" height="120"> 
  <div>
      Dieser Inhalt wird nur dann angezeigt,
      wenn der Browser canvas nicht unterstützt.
  </div>
  </canvas>
Wir definieren zusätzlich per CSS eine andere Größe für die Canvas: 
#leinwand {
  display: block; 
  margin-left:20pt;
  border: 1px solid red;
  width:30rem; 
}
Schauen wir dieses Beispiel an, so sehen wir, dass die Canvas stark vergößert ist, aber die Maße der Grafik in der Canvas immer noch 120x120 Pixel betragen. Die Grafik wurde auf die per CSS eingestellte Größe skaliert, so wie jede andere Grafik auch.

Zusammenfassung

  • Die Attributewidth und height bestimmen Breite und Höhe der gezeichneten Grafik.
  • Die CSS-Regeln width und height dagegen bestimmen die dargestellte Größe im HTML-Dokument unabhängig von der gezeichneten Grafikgröße.