HTML canvas drawing line perpendicular on another line - stackoverflow
Fabric.js is a powerful and simple Javascript HTML5 canvas library
캔버스에서 두객체(동그라미 또는 사각형) 사이에 왕복선을 그리는 기능구현 테스트!
var $canvas = new fabric.Canvas("canvas");
//
function drawParallelLines(x1, y1, x2, y2) {
var px = y1 - y2;
var py = x2 - x1;
var endLen = 10; //distance between two parallel lines
var len = endLen / Math.hypot(px, py);
px *= len;
py *= len;
$canvas.add(new fabric.Line([x1, y1, x2, y2], { stroke: 'black' }));
$canvas.add(new fabric.Line([x1+px, y1+py, x2+px, y2+py], { stroke:'red' });
$canvas.add(new fabric.Line([x1-px, y1-py, x2-px, y2-py], { stroke:'red' });
}