Canvas scale / Skalieren: Vergrößern und Verkleinern
Wird der Context durch scale(2,2) skaliert, wird nicht nur die Zeichnung um den Faktor 2 skaliert. Auch die Position der Zeichnung liegt jetzt zwei mal so weit vom Ursprung oben links entfernt.
Wird nur ein Bereich der Zeichnung skaliert, speichert ctx.save() den Kontext vor der Anweisung ctx.scale() und ctx.restore() holt im Anschluß an die Skalierung den ursprünglichen Context zurück.
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "hsl(190,40%,70%)";
ctx.strokeRect(50, 40, 80, 40);
ctx.fillRect(50, 40, 80, 40);
ctx.save();
ctx.scale(2, 2);
ctx.strokeRect(50, 40, 80, 40);
ctx.fillStyle = "hsl(20,40%,90%)";
ctx.fillRect(50, 40, 80, 40);
ctx.restore();
ctx.strokeRect(50, 100, 80, 40);
ctx.fillRect(50, 100, 80, 40);
}
Das Speichern des Contexts mit ctx.save() und Zurücksetzen des Contexts mit ctx.restore() setzt den ursprünglichen Kontext wieder in Kraft.
ctx.scale(2,2) vergrößert den Kontext, aber der sichtbare Ausschnitt bleibt erhalten.
CANVAS Zeichnungen spiegeln scale (-1, 1)
In ähnlicher Weise wie SVG ein Element mit scale(-1, 1) spiegelt, funktioniert auch das Spiegeln im Javascript Canvas. Auch in SVG reicht das einfache Spiegeln nicht, denn das gespiegelte Element würde außerhalb des sichtbaren Quadranten landen: Das Element muss noch noch translate() zurück in den sichtbaren Viewport der SVG-Grafik verschoben werden.
Im Canvas wird genauso wie beim Verkleinern und Vergrößern zuerst der Context gespiegelt.
