Search code examples
javascriptmathrectanglesflip

How to flip a rectangle?

Say I have a rectangle of the following form:

{ 
  x: number, 
  y: number, 
  w: number, 
  h: number, 
  a: number
}

Where x and y refer to its top left point, w refers to its width, h refers to its height, and a refers to its angle in rotation around its center origin.

How would one perform a horizontal flip on this data structure? That is, visually, it should change from:

enter image description here

to:

enter image description here

Is there a mathematical operation that yields this result?

Likewise, is there a similar operation that would yield a vertical flip of the same data structure?

Here's some code for drawing rotated rectangles:

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");

function rotateCanvas(ctx, x, y, a) {
  ctx.translate(x, y);
  ctx.rotate(a);
  ctx.translate(-x, -y);
}

function drawRotatedRectangle(ctx, rX, rY, rW, rH, rA) {
  rotateCanvas(ctx, rX + rW / 2, rY + rH / 2, rA);
  ctx.beginPath();
  ctx.rect(rX, rY, rW, rH);
  ctx.stroke();
  rotateCanvas(ctx, rX + rW / 2, rY + rH / 2, -rA);
}

drawRotatedRectangle(context, 30, 30, 100, 50, 0.5);
<canvas></canvas>

Solution

  • The answer is literally just:

    rectangle.angle = -rectangle.angle

    This works for horizontal flips and vertical flips since they both yield the same result interestingly enough.