How to convert a line to a rotated rectangle?

Question

Let's say I had a line with the form: x1, y1, x2, y2 and a given thickness.

I am looking for a way to convert that line to a rectangle rotated around its origin, such that if you were to draw both of them on a canvas, they would overlap completely.

I've developed a complete reproduction of the problem I'm facing below:

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

const thickness = 7;
const lineX1 = 25, lineY1 = 50;
const lineX2 = 100, lineY2 = 100;

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

function drawRectangle(rX, rY, rW, rH, rA, color) {
  ctx.beginPath();
  ctx.fillStyle = "#dd3333";
  rotateCanvas(rX + rW / 2, rY + rH / 2, rA);
  ctx.rect(rX, rY, rW, rH);
  rotateCanvas(rX + rW / 2, rY + rH / 2, -rA);
  ctx.fill();
}

function drawLine(x1, y1, x2, y2) {
  ctx.lineWidth = thickness;
  ctx.strokeStyle = "#33dd33";
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

function calcRectFromLine(x1, y1, x2, y2) {
  const dx = x2 - x1;
  const dy = y2 - y1;
  const mag = Math.sqrt(dx * dx + dy * dy);
  const angle = Math.atan2(dy, dx);

  return { x: x1, y: y1, w: mag, h: thickness, a: angle };
}

drawLine(lineX1, lineY1, lineX2, lineY2);

const r = calcRectFromLine(lineX1, lineY1, lineX2, lineY2);

drawRectangle(r.x, r.y, r.w, r.h, r.a);

<canvas></canvas>

If you run the code, you'll see that the red rectangle is not on top of the green line. I would like to fix that somehow.

I believe the only function that needs to be fixed is calcRectFromLine. Ideally that would return a rectangle that, when passed to drawRectangle, would cause the green line to no longer be visible, as it would be covered completely by the red rectangle.

I also believe I need to use some sort of sin and cos to offset the red rectangle, but I'm not sure of the exact math to accomplish that.

Answer 1

You calculate rectangle left and top improperly, using coordinates of rotated line. Correction:

return { x: (x1+x2)/2 - mag/2, y: (y1+y2)/2 - thickness/2, 
         w: mag, h: thickness, a: angle };`

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

const thickness = 7;
const lineX1 = 25, lineY1 = 50;
const lineX2 = 100, lineY2 = 100;

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

function drawRectangle(rX, rY, rW, rH, rA, color) {
  ctx.beginPath();
  ctx.fillStyle = "#dd3333";
rotateCanvas(rX + rW / 2, rY + rH / 2, rA);
  ctx.rect(rX, rY, rW, rH);
  rotateCanvas(rX + rW / 2, rY + rH / 2, -rA);
  ctx.fill();
}

function drawLine(x1, y1, x2, y2) {
  ctx.lineWidth = thickness;
  ctx.strokeStyle = "#33dd33";
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

function calcRectFromLine(x1, y1, x2, y2) {
  const dx = x2 - x1;
  const dy = y2 - y1;
  const mag = Math.sqrt(dx * dx + dy * dy);
  const angle = Math.atan2(dy, dx);

  return { x: (x1+x2)/2 - mag/2, y: (y1+y2)/2 - thickness/2, w: mag, h: thickness, a: angle };
}

drawLine(lineX1, lineY1, lineX2, lineY2);

const r = calcRectFromLine(lineX1, lineY1, lineX2, lineY2);

drawRectangle(r.x, r.y, r.w, r.h, r.a);

<canvas><\canvas>