SOURCE

const Flatten = window['@flatten-js/core']
const points = [
    { id: 101, x: 11, y: 11 },
    { id: 102, x: 20, y: 15 },
    { id: 103, x: 18, y: 20 },
    { id: 104, x: 5, y: 15 },
    { id: 105, x: 8, y: 5 },
    { id: 106, x: 15, y: 6 },
].map(item => new Flatten.Point(item.x * 10, item.y * 10))


const polygon = new Flatten.Polygon(points)
const islands = polygon.splitToIslands()
console.log(Object.keys(islands[0]))
document.querySelector('#svgResult').innerHTML = polygon.svg()
document.querySelector('#msg').innerHTML = JSON.stringify(islands[0].faces, '', 4)


// 画线
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(points[0].x, points[0].y)
for (let i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y)
    ctx.stroke();
    ctx.fillText(i, (points[i - 1].x + points[i].x) / 2, (points[i - 1].y + points[i].y) / 2)
}

<canvas id="myCanvas" width="300" height="300"></canvas>

<svg id="svgResult"></svg>
<pre id="msg">test</pre>

body {
    background: #fff;
}

#myCanvas {
    width: 300px;
    height: 300px;
    border: 1px solid #d3d3d3;
}

#svgResult {
    width: 300px;
    height: 300px;
    border: 1px solid #d3d3d3;
}