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:

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>