Überlegungen zur Einbindung von Canvas-Elementen in responsive Websites

Die meisten Darstellungen zum HTML5-Canvas-Element gehen davon aus, dass das die Elemente einer Webseite eine statische Größe haben. Hier stelle ich einige Gedanken und Lösungen vor, die veränderliche Größen, z.B. im Zusammenhang mit der Gestaltung responsiver Websites, ermöglichen.

Quellen

Zunächst einige Links zu diesem Thema:

• eine der vielversprechendsten Lösungen stammt von Alex Meijer. Unter Resizable HTML5 Canvas beschreibt er sein vorgehen.
• hier findet man ebenfalls einen Vorschlag. Der mündet sogar in ein Objekt, dass man mit der Maus bewegen kann. Leider beschränkt sich die Größenanpassung auf die Breite des Objektes. Sicherheitshalber habe ich die Github-repo des Autors geforkt.
• Eine Lösung, auf die ich später noch näher eingehen werde, bezieht sich auf Canvas-Elemente auf Webseiten mit Bootstrap. Ich habe diese Lösung auch bei JSFiddle geforkt.
• Zu einer anderen Lösung finde ich im Augenblick nur noch meinen JSFiddle-Fork. Hier wird sogar in 3D animiert.
• Eine Lösung mit aufwendiger Grafik wird hier im Zusammenhang mit Canvas-Spiele-Programmierung vorgestellt. Ich habe sie bei Code-Pen geforkt.

Ein eigenes Beispiel findet man hier