search

wanadev / perspective.js

Transforms the perspective of an image and draw it on a canvas
Apache License 2.0
136 stars 27 forks source link

Flip & Mirror Error #12

Open cagdastakis opened 1 year ago

cagdastakis commented 1 year ago

I do some maths but couldnt figured out. I want to draw 2 images. First one is perfect with perspective as i wanted but second should be flipped or mirrored. When i change the coordinates for flipped image disappear or broken pixels. Anyone have a solution for this? Mirrored and perspective :S

flozz commented 1 year ago

Hello,

perspective.js does not work when flipping points. But you can mirror your image using the scale() method of the 2D context before drawing your image:

const ctx = canvas.getContext("2d");
ctx.save();
ctx.scale(-1, 1);  // Horizontal flip
// here draw your deformed image (ctx.drawImage...)
ctx.restore()

More: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale#flipping_things_horizontally_or_vertically