How to flip a rectangle?-CodePudding

Locked for 12 hours. Comments on this question have been disabled, but it is still accepting new answers and other interactions.

to:

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>

CodePudding user response：

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.