Javascript Canvas scale / mirror – Skalieren und Spiegeln

Scale und mirror, spiegeln

Die Methode scale() verkleinert bzw. vergrößert eine Zeichnung im Canvas, und zwar nicht nur die als nächste folgende Zeichnung, sondern sowohl alle zukünftig eingebrachten Zeichnungen als auch die Positionierung.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

Formen im Canvas vergrößern

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.