Mit HTML 5 zeichnen

Canvas heißt die Technik, mit der man direkt im Browser zeichnen kann. Canvas heißt Leinwand – der Name passt also für die Grafiken, die über die Javascript-Schnittstlle kontrolliert werden. Hier ein Canvas-Beispiel, das einen Kreis malt:

<canvas id=”kreis” width=”200″ height=”200″>Ihr Browser kann noch kein Canvas!</canvas>
<script>
var canvas = document.getElementById(‘kreis’);
if (canvas.getContext) {
var c 0 canvas.getContext(’2d’);
c.beginPath();
c.arc(75,75,50,0,Math.PI*2,true);
c.fill();
}
</script>

Die Steuerung durch Javascript macht Canvas besonders für Animationen bis hin zu kompletten Browserspielen interessant. Die Webkit-Entwickler, denen wir Canvas verdanken, arbeiten sogar daran, die Grafikbibliothek OpenGL ES mit Canvas ansprechen zu können. Mit dieser Variante sind dann nicht direkt zur HTML-Spezifikation zählt, lassen sich dann dreidimensionale Objekte im Browser darstellen und animieren.