canvas : Bilder horizontal spiegeln

Jofre

Erfahrenes Mitglied
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

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

Und hier ist das Beispiel leicht modifiziert:
Javascript:
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

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