Построить прямоугольник вокруг точек

by twobomb three

HTML

<canvas id="myCanvas"></canvas>

CSS

html,body{
  height:100%;
  margin:0;
  padding:0;
}

JavaScript

var canvas = document.querySelector("#myCanvas");
var ctx = canvas.getContext("2d");
var ctxW,ctxH;
canvas.width = ctxW = document.body.offsetWidth;
canvas.height = ctxH =document.body.offsetHeight;

var dots = [];

ctx.font = "24px Arial";
ctx.fillText("Кликай по канвасу для построения точек",50,50);

canvas.addEventListener("mousedown",function(e){
	dots.push({x:e.offsetX,y:e.offsetY});
  drawDots();
  drawRects(getRects(dots));
});

function drawDots(){
	ctx.clearRect(0,0,ctxW,ctxH);
  ctx.strokeStyle = "black";
  dots.forEach((e,i)=>{  
  	ctx.beginPath();
    ctx.arc(e.x,e.y,5,0,Math.PI*2);
    ctx.fill();
    if(i > 0){
    	ctx.beginPath();
    	ctx.moveTo(dots[i-1].x,dots[i-1].y);
      ctx.lineTo(dots[i].x,dots[i].y);
      ctx.stroke();
    }  
  });
}

function drawRects(rects){
	ctx.strokeStyle = "red";
	rects.forEach(e=>{  
    	ctx.beginPath();
    	ctx.moveTo(e.x1,e.y1);
      ctx.lineTo(e.x2,e.y2);
      ctx.lineTo(e.x3,e.y3);
      ctx.lineTo(e.x4,e.y4);
      ctx.closePath();
      ctx.stroke();
  });
}

function getRects(dots,padding  = 30){		
  if(dots.length == 1)
  	dots = dots.concat([dots[0]]);
	let rects = [];
  	if(dots.length > 1){
    	for(let i = 0; i < dots.length-1;i++){      
      	let angle = getAngle(dots[i].x,dots[i].y,dots[i+1].x,dots[i+1].y);
        rects.push({
        	x1:dots[i].x + padding * Math.cos(angle-Math.PI/2) + padding * Math.cos(angle+Math.PI),
          y1:dots[i].y  + padding * Math.sin(angle-Math.PI/2) + padding * Math.sin(angle+Math.PI),
          
        	x2:dots[i].x + padding * Math.cos(angle+Math.PI/2) + padding * Math.cos(angle+Math.PI),
          y2:dots[i].y  + padding * Math.sin(angle+Math.PI/2) + padding * Math.sin(angle+Math.PI),
          
        	x3:dots[i+1].x + padding * Math.cos(angle+Math.PI/2) + padding * Math.cos(angle),
          y3:dots[i+1].y  + padding * Math.sin(angle+Math.PI/2) + padding * Math.sin(angle),
          
        	x4:dots[i+1].x + padding * Math.cos(angle-Math.PI/2) +...