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

Noch nicht ausdrücklich verraten haben wir, dass die Werte von height und width die jeweilige Anzahl Pixel meinen. Wir können über die Attribute ein ganz beliebige Grafikmaße einstellen, z.B. 100x200. 
  <canvas id="leinwand"> 
  <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 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>
Dafür definieren wir 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 gewünschte Größe scaliert, so wie jede andere Grafik auch.

Zusammenfassung

  • Die CSS-Regeln width und height bezogen auf das Element canvas bestimmen die dargestellte Größe und sind keine Alternative zu den Attributenheight und width der Canvas.
  • Unabhängig von der gerenderden Größe bestimmt das Attribut width die Anzahl Pixel in der Breite und das Attribut height die Anzahl Pixel in der Höhe der enthaltenen Grafik.