Canvas - HTML5 - page 147

Abbildung 5.22: Das Quellbild für alle »drawImage()«-Beispiele
Neben Pixelangaben, die uns in den Beispielen begegnen werden, zeigt Abbil-
dung 5.22 die imposante, 1000 Meter hohe Felswand von El Capitan im Yosemi-
te Nationalpark, vom Taft Point aus fotografiert. Dieses Bild wird nun onload in
einer der drei Arten auf den 600 x 400 Pixel großen Ziel-Canvas gezeichnet. Die
erste und einfachste Möglichkeit bestimmt über dx / dy die linke obere Ecke des
Bildes im Ziel-Canvas. In unserem Fall ist dies die Position 0/0.
image.onload = function() {
context.drawImage(image,0,0);
};
Breite sowie Höhe werden dabei direkt aus dem Originalbild übernommen, und
da unser Bild größer als der Ziel-Canvas ist, erscheint wenig überraschend
auch nur das linke obere Viertel mit dem Taft Point auf der Canvas-Fläche.
Wollen wir den gesamten Bildausschnitt im Canvas darstellen, müssen wir zu-
sätzlich die gewünschte Breite und Höhe in den Argumenten dw / dh angeben.
Die Skalierung des Bildes auf 600 x 400 Pixel übernimmt dann der Browser für
uns.
image.onload = function() {
context.drawImage(image,0,0,600,400);
};