Responsive Canvas: CSS und Javascript

Canvas responsive

Ein Javascript-Canvas-Element mit width- und height-Attributen passt sich mit einem einfachen width="100%" an den verfügbaren Platz an. Damit ein Javascript-Canvas auf hochauflösenden Monitoren immer scharf gerendert werden, reicht das Anpassen mit 100% nicht aus.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.