Chimicherrychanga

Da ich es unter Umständen nochmal brauchen werde, habe ich mich mit dem HTML5-Element canvas beschäftigt und wie man mit Javascript darauf arbeitet. Um ein wenig die Motivation daran zu heben, beschloss ich, wieder etwas zu zeichen – wie damals Kyubey mit CSS.

Die Canvas-Demo sollte in jedem aktuellen Browser bei aktiviertem Javascript funktionieren.

Wer auch daran Interesse hat den Umgang mit Canvas zu lernen, dem seien Dive Into HTML5 und das Mozilla Developer Network nahegelegt.

Vollbild

canvas {
	height: 100%;
	width: 100%;
}

Nope! Das verzerrt nur das Bild und es wird unförmig und verwaschen. Möchte man kein Vollbild, kann man Pixel-Angaben nehmen. Ansonsten macht man es dynamisch mit Javascript und weißt dem <canvas> die Fensterhöhe und -breite zu:

canv = document.getElementById( "my_canvas" );
canv.height = window.innerHeight;
canv.width = window.innerWidth;

Wenn man die Fenstergröße ändert, muss man allerdings nochmal die Seite aktualisieren, damit sich der Inhalt auch anpasst. Ließe sich bestimmt auch über Javascript machen.

Das Auge

Besonders problematisch war das Auge. Erst einmal ist die zugrundeliegende Form eine Ellipse, aber mit den gegebenen Funktionen lassen sich nur Bögen und Kreise zeichnen. Nach misslungenen Versuchen mit scale() um den Kreis wie gewünscht zu verzerren, habe ich schließlich diesen Algorithmus genommen, der Bézierkurven verwendet.

Nächste Hürde: Wie kann ich dafür sorgen, dass Iris und Pupille am Rand der weißen Ellipse abgeschnitten werden? Order um auf mein verbliebenes Wissen aus Computergrafik zurück­zugreifen: Wie setze ich hier Clipping ein?

// Eye
context.beginPath();
context.save();
context.rotate( Math.PI / 180 * 12 );
context.translate( 62, -69 );
cadraw.ellipse( [263, 398], [403, 213] );
context.restore();

// Start clipping inside eye
context.save();
context.clip();

// … Draw ALL THE inner-eye stuff! …

// End clipping inside eye
context.restore();

Nachdem man den Pfad für das Auge festgelegt hat, kann man mit clip() diesen als Grenze festlegen. Damit die späteren Zeichnungen davon nicht betroffen sind, speichert man vorher mit save() den Zustand. Nachdem das Augeninnere gezeichnet ist, stellt man den unge-clippten Zustand mit restore() wieder her.

---

Die nächste Zeichnung könnte ich ja dann mit WebGL machen. Hoffentlich wird es auch in Opera bis dahin unterstützt. Mann, Mann, Mann, die verwendete Technik wird dann aber auch von Mal zu Mal aufwendiger.