How to close Polygon during drawing OpenLayers?

Question

I use Draw obejct to draw default polygon. It gives the following result:

polygon drawing OpenLayers

As you can see, the polygon is not closed. How to close it during drawing like it works after complete drawing?

Maybe dont close, but draw the last line connect first point and last point.

Answer 1

You can provide your own style function to the Draw interaction. By default the Draw interaction maintains a LineString of drawn points (the blue line) and a polygon (the white area). What you want is to apply the Stroke and Fill to the Polygon and ignore the LineString:

function getStyleFunction() {
  /** @type {Object<import("../geom/GeometryType.js").default, Array<Style>>} */
  const white = [255, 255, 255, 1];
  const blue = [0, 153, 255, 1];
  const width = 3;
  const styles = {
    Polygon: [
      new Style({
        fill: new Fill({
          color: [255, 255, 255, 0.5],
        }),
        stroke: new Stroke({
          color: blue,
          width: width,
        }),
      }),
    ],
    Point: [
      new Style({
        image: new CircleStyle({
          radius: width * 2,
          fill: new Fill({
            color: blue,
          }),
          stroke: new Stroke({
            color: white,
            width: width / 2,
          }),
        }),
        zIndex: Infinity,
      }),
    ]
  };

  return function (feature, resolution) {
    return styles[feature.getGeometry().getType()];
  };
}
const draw = new Draw({
  type: 'Polygon',
  style: getStyleFunction(),
});

Style based on the default Draw style