먼저, Fabric.js를 HTML 파일에 추가해야 합니다. 다음과 같이 스크립트 태그를 사용하여 Fabric.js를 로드할 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>

이제 Fabric.js를 사용하여 도형과 점을 그리는 JavaScript 코드를 작성해 보겠습니다.

// Canvas 객체 생성
var canvas = new fabric.Canvas('canvas');

// 도형 그리기
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 100,
  fill: 'red'
});
canvas.add(rect);

// 특정 점의 좌표 가져오기
var point = rect.getPointByOrigin('center', 'center');

// 점 그리기
var circle = new fabric.Circle({
  left: point.x + 50,  // x 좌표에 50을 더하여 오른쪽으로 이동
  top: point.y,       // y 좌표 그대로 유지
  radius: 5,
  fill: 'black'
});
canvas.add(circle);

위의 코드에서는 Fabric.js의 fabric.Canvas을 사용하여 캔버스를 생성하고, fabric.Rect을 사용하여 빨간색으로 채워진 사각형을 그렸습니다. 그리고 getPointByOrigin 메서드를 사용하여 사각형의 중심점 좌표를 얻었습니다. 그리고 이 좌표를 기반으로 fabric.Circle을 사용하여 반지름이 5인 검은색 원을 그렸습니다.

이제 HTML 파일에 <canvas id="canvas"></canvas>와 같이 캔버스 요소를 추가하고, 위의 JavaScript 코드를 실행하면 도형의 특정 점에서 주어진 길이만큼 점이 그려집니다.

참고로, Fabric.js는 HTML5 캔버스를 기반으로 하는 JavaScript 라이브러리로, 편리한 기능들을 제공합니다. Fabric.js의 다양한 기능과 API를 자세히 알아보고 싶다면 공식 문서를 참고하시기 바랍니다.