This example uses OpenLayers v10.9.0. The latest is v.
Edit

#### Draw Shapes

draw 17 edit 13 freehand 3 vector 86

#####

Shape type:

Using the ol/interaction/Draw to create regular shapes

This demonstrates the use of the `geometryFunction` option for the `ol/interaction/Draw`. Select a shape type from the dropdown above to start drawing. To activate freehand drawing, hold the `Shift` key. Square drawing is achieved by using `type: 'Circle'` type with a `geometryFunction` that creates a 4-sided regular polygon instead of a circle. Box drawing uses `type: 'Circle'` with a `geometryFunction` that creates a box-shaped polygon instead of a circle. Star drawing uses a custom geometry function that converts a circle into a star using the center and radius provided by the draw interaction.

##### main.js

    import Map from 'ol/Map.js';
    import View from 'ol/View.js';
    import Polygon from 'ol/geom/Polygon.js';
    import Draw, {createBox, createRegularPolygon} from 'ol/interaction/Draw.js';
    import TileLayer from 'ol/layer/Tile.js';
    import VectorLayer from 'ol/layer/Vector.js';
    import OSM from 'ol/source/OSM.js';
    import VectorSource from 'ol/source/Vector.js';

    const raster = new TileLayer({
      source: new OSM(),
    });

    const source = new VectorSource({wrapX: false});

    const vector = new VectorLayer({
      source: source,
    });

    const map = new Map({
      layers: [raster, vector],
      target: 'map',
      view: new View({
        center: [-11000000, 4600000],
        zoom: 4,
      }),
    });

    const typeSelect = document.getElementById('type');

    let draw; // global so we can remove it later
    function addInteraction() {
      let value = typeSelect.value;
      if (value !== 'None') {
        let geometryFunction;
        if (value === 'Square') {
          value = 'Circle';
          geometryFunction = createRegularPolygon(4);
        } else if (value === 'Box') {
          value = 'Circle';
          geometryFunction = createBox();
        } else if (value === 'Star') {
          value = 'Circle';
          geometryFunction = function (coordinates, geometry) {
            const center = coordinates[0];
            const last = coordinates[coordinates.length - 1];
            const dx = center[0] - last[0];
            const dy = center[1] - last[1];
            const radius = Math.sqrt(dx * dx + dy * dy);
            const rotation = Math.atan2(dy, dx);
            const newCoordinates = [];
            const numPoints = 12;
            for (let i = 0; i < numPoints; ++i) {
              const angle = rotation + (i * 2 * Math.PI) / numPoints;
              const fraction = i % 2 === 0 ? 1 : 0.5;
              const offsetX = radius * fraction * Math.cos(angle);
              const offsetY = radius * fraction * Math.sin(angle);
              newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
            }
            newCoordinates.push(newCoordinates[0].slice());
            if (!geometry) {
              geometry = new Polygon([newCoordinates]);
            } else {
              geometry.setCoordinates([newCoordinates]);
            }
            return geometry;
          };
        }
        draw = new Draw({
          source: source,
          type: value,
          geometryFunction: geometryFunction,
        });
        map.addInteraction(draw);
      }
    }

    /**
     * Handle change event.
     */
    typeSelect.onchange = function () {
      map.removeInteraction(draw);
      addInteraction();
    };

    document.getElementById('undo').addEventListener('click', function () {
      draw.removeLastPoint();
    });

    addInteraction();

##### index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Draw Shapes</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="node_modules/ol/ol.css">
        <style>
          .map {
            width: 100%;
            height: 400px;
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>
        <div class="row">
          <div class="col-auto">
            <span class="input-group">
              <label class="input-group-text" for="type">Shape type:</label>
              <select class="form-select" id="type">
                <option value="Circle">Circle</option>
                <option value="Square">Square</option>
                <option value="Box">Box</option>
                <option value="Star">Star</option>
                <option value="None">None</option>
              </select>
              <input class="form-control" type="button" value="Undo" id="undo">
            </span>
          </div>
        </div>

        <script type="module" src="main.js"></script>
      </body>
    </html>

##### package.json

    {
      "name": "draw-shapes",
      "dependencies": {
        "ol": "10.9.0"
      },
      "devDependencies": {
        "vite": "^3.2.3"
      },
      "scripts": {
        "start": "vite",
        "build": "vite build"
      }
    }