title: Put Text to center of polygons
body: <p>I get an array of polygons from a database with multi polygons. I want to put text to the center of polygons.</p>
  <p>It may be a triangle or a rectangle or a square or a polygon</p>
  <p>Font size must be dynamic from size of polygon.</p>
  <p>Text color same with line color.</p>
  <p>Example from database:</p>
  <p><a href="https://i.stack.imgur.com/zcuMi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zcuMi.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var polygons = [
    {
      text: "ROI",    color: "#00ff00",
      jointLength: 5,    lineWidth: 3,
      X: [890, 893, 409, 21, 27],    Y: [658, 205, 199, 556, 659],
    },  {
      text: "Lane 3",    color: "#ff0000",
      jointLength: 4,    lineWidth: 3,
      X: [915, 911, 643, 879],    Y: [5, 682, 683, 2],
    },  {
      text: "Lane 4",    color: "#ff0000",
      jointLength: 4,    lineWidth: 3,
      X: [888, 656, 170, 701],    Y: [2, 680, 682, 1],
    },  {
      text: "Lane 5",    color: "#ff0000",
      jointLength: 5,    lineWidth: 3,
      X: [712, 182, 4, 4, 590],    Y: [1, 681, 682, 532, 1],
    },  {
      text: "Speed",    color: "#0000ff",
      jointLength: 4,    lineWidth: 3,
      X: [290, 911, 873, 5],    Y: [367, 357, 668, 664],
    }
  ];
  
  polygons.forEach((polygon) =&gt; {
    const ctx = document.getElementById("canvas").getContext("2d");
    ctx.strokeStyle = polygon.color;
    ctx.lineWidth = polygon.lineWidth;
    ctx.beginPath();
    ctx.moveTo(polygon.X[0], polygon.Y[0]);
    for (let i = 1; i &lt; polygon.jointLength; i++) {
      ctx.lineTo(polygon.X[i], polygon.Y[i]);
    }
    ctx.closePath();
    ctx.stroke();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="canvas" width=999 height=999&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>