Fabric.js - Draw regular octagon

Question

I am using Fabric.js and I have the following code for drawing a hexagon:

makeObject(originPoint, newPoint, canvasObject, properties) {

let width = Math.abs(newPoint.x - originPoint.x);
let height = 0;

if(this.shouldKeepProportion){
  height=width;
}else{
  height=Math.abs(newPoint.y - originPoint.y);
}

  width = (this.minWidth!=null && width<this.minWidth ? this.minWidth: width);
  height = (this.minHeight!=null && height<this.minHeight ? this.minHeight : height);

let sweep=Math.PI*2/6;
let points=[];
//generate points for 6 angles
for(let i=0;i<6;i++){
    let x=width*Math.cos(i*sweep);
    let y=height*Math.sin(i*sweep);
    points.push({x:x/2,y:y/1.75});
}

properties = {
    objectType: 'octagon',
    left: originPoint.x,
    top: originPoint.y,
    originX: 'left',
    originY: 'top',
    fill: 'rgba(0, 0, 0, 1.0)',
    width: width,
    height: height,
    originX: originPoint.x > newPoint.x ? 'right' : 'left',
    originY: originPoint.y > newPoint.y ? 'bottom' : 'top',
    flipX: originPoint.x > newPoint.x,
    stroke: 'rgba(0, 0, 0, 1.0)',
    strokeWidth: 1,
    strokeLineJoin: 'round',
    ...properties
};

return new fabric.fabric.Polygon(points, properties);
}

What I want to get is a regular octagon, same as the hexagon. If i try to change the number of corners/angles, I am getting the following type of octagon:

What I actually need is this:

PLEASE NOTE: I do not need it rotated or flipped or something like that, I need it drawn like on the picture.

Thank you for the help!

EDIT: Working JSFiddle: https://jsfiddle.net/42fb716n/

Answer 1

This should do it, using the Polygon() function instead of Line() so it's like a single object, not a group of objects, and so it works in your drawing App as you have different properties for single and group objects:

var canvas = new fabric.Canvas('canvas');
var size = 150;
var side = Math.round((size * Math.sqrt(2)) / (2 + Math.sqrt(2)));
var octagon = new fabric.Polygon([
  {x:-side / 2, y:size / 2},
  {x:side / 2, y:size / 2},
  {x:size / 2, y:side / 2},
  {x:size / 2, y:-side / 2},
  {x:side / 2, y:-size / 2},
  {x:-side / 2, y:-size / 2},
  {x:-size / 2, y:-side / 2},
  {x:-size / 2, y:side / 2}], {
    stroke: 'red',
    left: 10,
    top: 10,
    strokeWidth: 2,
    strokeLineJoin: 'bevil'
},false);
canvas.add(octagon);

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width=200 height=200></canvas>

Let me know if you need anything else. Happy to help!