nicht angemeldet
OrlokHallo Jürgen
Jede Einheit (incl.
rem) hat ihre Berechtigung – naha, bis aufpx(außer für dünne Linien).Soll man nicht beim
canvas-Element auch die Größe inpxangeben?
Welche Größe? ;-)
Beim canvas-Element haben wir es ja grundsätzlich mit mindestens zwei verschiedenen Größen zu tun, nämlich der Höhe und Breite des Elementes selbst und der Höhe und Breite des Inhalts, also der Bitmap, wobei die Größe der Bitmap über die HTML-Attribute height und width bestimmt wird, deren Werte tatsächlich in Pixeln anzugeben sind, allerdings ohne ausdrückliche Angabe der Einheit.
<body>
<canvas height="150" width="300"></canvas>
</body>
Nehmen wir nun mal an, wir hätten ein canvas mit Attributwerten wie in dem Beispiel oben erstellt, bei denen es sich nebenbei bemerkt um die Standardwerte handelt, aber wir hätten keinerlei Angaben zur Größe des canvas in unserem Stylesheet gemacht, dann würden in Ermangelung anderer Angaben die Werte der HTML-Attribute bei der Berechnung der Höhe und Breite des Elementes verwendet. Das bedeutet, in diesem Fall wäre die Größe des Elements identisch mit der Größe der Bitmap.
canvas {
height: 480px;
width: 640px;
}
Hätten wir jedoch für dasselbe Element zusätlich eine solche Regel im Stylesheet definiert, dann würde die Größe des canvas-Elementes auf Grundlage der dort angegebenen Werte berechnet und die im Markup angegebenen Attributwerte hätten auf die tatsächliche Größe des Elementes keinerlei Einfluss. Was insofern nachvollziehbar ist, als dass es sich hierbei um explizite Angaben für das Element selbst handelt, die natürlich eine höhere Priorität genießen als die implizite Berechnung der Werte auf Grundlage der Höhe und Breite der Bitmap.
console.log(canvas.height); // 150
console.log(canvas.clientHeight); // 480
Hierbei ist nun allerdings zu berücksichtigen, dass zwar beim Fehlen einer expliziten Angabe für die Größe des Elementes die Werte für die Größe des Inhalts als Berechnungsgrundlage verwendet werden, umgekehrt jedoch die Werte für die Bitmap nicht automatisch an die berechnete Größe des canvas angepasst werden, sollte es wie hier eine Differenz zwischen den beiden Größen geben.
Was in einem solchen Fall also passiert ist, dass die Grafik zwar auf Grundlage der spezifizierten Abmessungen für die Bitmap berechnet wird, diese dann beim Rendern jedoch auf die tatsächliche Größe des Elementes skaliert wird, was üblicherweise mit deutlichen Einbußen bei der Qualität der Darstellung einhergeht und was man darum nach Möglichkeit vermeiden möchte.
Angaben im Stylesheet zur Größe des Elementes in der Einheit px sind also nicht sinnvoll, wenn sie von den Werten der HTML-Attribute height und width abweichen, und wenn sie das nicht tun, kann man sie aus obengenannten Gründen auch gleich weglassen.
Daraus ist aber natürlich nicht zu folgern, dass man die Größe des canvas über die Attributwerte festbetonieren sollte, sondern es ist vielmehr zu empfehlen, vor dem Zeichnen die tatsächliche Größe des Elementes abzufragen und die Werte für die Bitmap bei einer Abweichung entsprechend anzupassen, also etwa den Wert von canvas.height auf den Wert von canvas.clientHeight zu setzen.
Wenn man dies tut, ist es in dieser Hinsicht auch egal, auf welche Weise die Größe des Elementes berechnet wird, also welche Einheit man für die jeweilige CSS-Eigenschaft verwendet. Das canvas-Element unterscheidet sich diesbezüglich also nicht von anderen Elementen und demnach gibt es auch hier eigentlich keinen Grund, px für die Angaben zur Höhe und Breite des Elementes zu verwenden, ebenso wie es regelmäßig nicht sinnvoll ist, explizite Angaben für die HTML-Attribute zu machen, da diese wie gesehen ohnehin vor dem Zeichnen an die tatsächliche Größe des Elementes anzupassen sind.
Gruß,
Orlok
Gunnar Bittersmann
JürgenB
Matthias Apsel
marctrix