# canvas : Bilder horizontal spiegeln



## Jofre (16. Juni 2019)

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 (16. Juni 2019)

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 (16. Juni 2019)

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 (16. Juni 2019)

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


----------

