canvas : Bilder horizontal spiegeln

[Jofre]

Einen schönen Tag,

gibt es bei Canvas die Möglichkeit ein Bild horizontal zu spiegeln .
Irgendwo habe ich mal was gesehen mit scaleX.
Klappt bei mir allerdings nicht

GzG

Joachim

 

[Technipion]

Hallo Joachim,
hier ist ein Canvas-Beispiel: CanvasRenderingContext2D.drawImage()

Und hier ist das Beispiel leicht modifiziert:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');

ctx.scale(1, -1); // horizontal spiegeln
ctx.drawImage(image, 50, 50, 104, 124, 30, -30, 87, -104);

Du musst ein bisschen mit den Werten spielen. Aber im Prinzip läuft es darauf hinaus, dass du einfach die Skalierung des Canvas veränderst. Ich habe das Bild hier auf den Kopf gestellt (du kannst aber natürlich auch horizontal spiegeln).

Gruß Technipion

 

[Jofre]

Guten Abend,

es ist komisch, wenn ich scale mit einem negativen Wert anwende, verschwindet das Bild.
Ich habe es auch in dem Beispiel in
dein angeführtes Canvas-Beispiel: CanvasRenderingContext2D.drawImage()
probiert. Das Bild verschwindet.

GzG

Joachim

 

[Jofre]

Es funktioniert doch. Ich hatte übersehen, dass man dann auch Breite/Höhe negativ setzen muss
Danke