Johannes Scharrer Realschule
91217 Hersbruck

Malen mit <canvas>

Seit html5 gibt es das neue Element <canvas>.
Hier wird eine Leinwand (engl: canvas) definiert, in der Bilder nicht extern geladen, sondern direkt im Browser (Firefox, Chrome, etc) berechnet, gedreht und transformiert werden.

Dies ist ein kleines Beispiel:

Anwendungsbeispiel: Das große Kartenquiz

ieLeider unterstützt der Internet-Explorer bis zur Version 8 kein canvas. Wir empfehlen:

Firefox Chrome Opera Safari

Länderquiz Beim Surfen stieß ich per Zufall auf das html5 Canvas-Demo Map Quiz von Kevin Pickell.

Canvas zeichnet aus geografischen Koordinaten die passenden Karten, denen mit drag & Drop dann die Ländernamen zugeordnet werden müssen.

Als Demo geplant, verhinderten einige Eigenheiten die Einbindung in ein cms:

  1. alles in einer Datei
    Html, Javascript-Code und die geografischen Koordinaten waren alle in einer Datei (648kB), die (zu) lange zum Laden brauchte.
  2. Koordinaten zu genau
    Gibt's das überhaupt? - Ja, denn jede unbewohnte kanadische Eismeerinsel wurde bis auf 1 Meter genau berechnet. → Die Folge waren große Datenmengen.
  3. viele Farben
    Jedes Land hatte eine andere Farbe, was an sich ja gar nicht schlecht ist; nur dass schwarze Schrift auf dunkelblau nicht so gut lesbar ist.

Dankenswerterweise durfte ich das Script verändern und verwenden: