Canvas: Fill triangle with inner stroke

Question

I have two triangles:

Stoke calculates with clip

  ctx.beginPath();
  ctx.moveTo(a.x, a.y);
  ctx.lineTo(b.x, b.y);
  ctx.lineTo(c.x, c.y);
  ctx.lineTo(a.x, a.y);
  ctx.closePath();

  ctx.lineWidth = obj.data.borderWidth * 2;
  ctx.strokeStyle = obj.data.borderColor;

  ctx.save();
  ctx.clip();
  ctx.stroke();
  ctx.restore();

I want to create new triangle inside stroke and fill it. How can i get coordinates of new triangle?

Answer 1

How i solve this:

Define functions for find distance between points, find vector angle, calculate new point by angle and distance:

function vectorAngle(a, b) {
  return (Math.atan2(b.y - a.y, b.x - a.x) * 180) / Math.PI;
}

function newPointByAngle(point, length, angle) {
  const x = point.x + Math.cos((Math.PI * angle) / 180) * length;
  const y = point.y + Math.sin((Math.PI * angle) / 180) * length;

  return { x, y };
}

function vectorDistance(a, b) {
  return Math.hypot(b.x - a.x, b.y - a.y);
}

and function for find needed points in cycle

function findInnerTriangle(a, b, c) {
  const ca_angle = vectorAngle(c, a);
  const cb_angle = vectorAngle(c, b);

  const left_point = newPointByAngle(c, vectorDistance(c, a), ca_angle);
  const left_point_with_border = newPointByAngle(left_point, border, ca_angle - 90);

  const right_point = newPointByAngle(c, vectorDistance(c, b), cb_angle);
  const right_point_with_border = newPointByAngle(right_point, border, cb_angle + 90);

  const target_point = { x: a.x, y: a.y - border };

  let a_handed_point = left_point_with_border;
  const left_angle = ca_angle + 180;
  for (let i = 0; a_handed_point.y >= target_point.y; i++) {
    a_handed_point = newPointByAngle(left_point_with_border, i, left_angle);
  }

  let b_handed_point = left_point_with_border;
  const right_angle = cb_angle + 180;
  for (let i = 0; b_handed_point.y >= target_point.y; i++) {
    b_handed_point = newPointByAngle(right_point_with_border, i, right_angle);
  }

  let c_handed_point = left_point_with_border;
  for (let i = 0; vectorAngle(c_handed_point, b_handed_point) <= cb_angle; i++) {
    c_handed_point = newPointByAngle(left_point_with_border, i, left_angle);
  }

  return { a_handed_point, b_handed_point, c_handed_point };
}