canvas mit CSS min, max, clamp
Das Bild im Canvas ist eine Bitmap und keine Vektorgrafik wie SVG – Vergrößern unterliegt also Grenzen. Ohne weitere Angaben wird ein Canvas so breit und so hoch gerendert wie in den Attributen width und height angegeben. Auf einem kleinen Monitor würde das canvas-Element überfließen, wenn es nicht durch CSS begrenzt wird.
<canvas width="600" height="180"></canvas>
CSS min, max und clamp bringen die eleganteste Methode mit, um das canvas-Element an das verfügbare Platzangebot anzupassen und den Inhalt des Canvas im richtigen Seitenverhältnis wiederzugeben.
.cssmin {
+-- minimale Größe
|
|
width: min(98vw, 920px);
|
|
+-- maximale Größe
}
oder gleich mit einer CSS-Variablen
.cssmin {
width: min(98vw, var(--max-width))
}
Und eine weitere Alternative ist ein style-Attribut im öffnenden Canvas-Tag:
<canvas width="364" height="156" style="width: max(98vw, 300px)"> </canvas>
Die CSS-Funktionen min() und max() werden von allen modernen Browsern unterstützt, nur IE11 war noch nicht dabei.
Canvas dynamisch anpassen
Breite und Höhe des Canvas-Elements mit seinem Inhalt bestimmen, wie weit sich ein Canvas Vergrößern / Verkleinern lässt, ohne dass der Inhalt auf hoch auflösenden Monitoren unscharf und pixelig wird.
Je nach Art des Inhalts kann ein Canvas u.U. in doppelter oder dreifacher Größe angelegt werden, aber genereller wäre natürlich eine programmatische Skalierbarkeit.