как соединить углы прямоугольников в CANVAS

Question

есть 2 input(в input числа записываются через дефис на пример: 120-120) и один button при нажатии на кнопку создаются прямоугольники и они должны соединиться вот так:

не получается реализовать соединение, вот мой код:

const canv = document.querySelector('canvas')
const tools = canv.getContext('2d')

btn.addEventListener('click', () => {

  let in1 = inp1.value.split('-')
  tools.strokeRect(100, 100, in1[0], in1[1])
  let in2 = inp2.value.split('-')
  tools.strokeRect(150, 150, in2[0], in2[1])
})

<input id="inp1" value="120-120">
<input id="inp2" value="150-150">
<button id="btn">add</button>
<br>
<br>
<canvas width="900" height="600" style="background: yellowgreen"></canvas>

Answer 1

const canv = document.querySelector('canvas')
const tools = canv.getContext('2d')

btn.addEventListener('click', () => {

  let in1 = inp1.value.split('-')
  tools.strokeRect(100, 100, in1[0], in1[1])
  let in2 = inp2.value.split('-')
  tools.strokeRect(150, 150, in2[0], in2[1])
  
  tools.moveTo(100, 100);
  tools.lineTo(150, 150);

  tools.moveTo(100 + +in1[0], 100);
  tools.lineTo(150 + +in2[0], 150);

  tools.moveTo(100 + +in1[0], 100 + +in1[1]);
  tools.lineTo(150 + +in2[0], 150 + +in2[1]);

  tools.moveTo(100, 100 + +in1[1]);
  tools.lineTo(150, 150 + +in2[1]);

  tools.stroke();
})

<input id="inp1" value="120-120">
<input id="inp2" value="200-200">
<button id="btn">add</button>
<br>
<br>
<canvas width="900" height="600" style="background: yellowgreen"></canvas>

БЛОГ НА HUSL

как соединить углы прямоугольников в CANVAS

Ответы (1 шт):