Implement custom circle render

src/ol/render/canvas/Builder.js

@@ -345,6 +345,26 @@ class CanvasBuilder extends VectorContext {
         geometry,
         renderer,
       ]);
+    } else if (type == GeometryType.CIRCLE) {
+      const flatCoordinates = geometry.getFlatCoordinates();
+      this.appendFlatLineCoordinates(
+        flatCoordinates,
+        0,
+        flatCoordinates.length,
+        stride,
+        false,
+        false
+      );
+      builderEnd = this.coordinates.length;
+      this.instructions.push([
+        CanvasInstruction.CUSTOM,
+        builderBegin,
+        builderEnd,
+        geometry,
+        renderer,
+        undefined,
+        4,
+      ]);
     }
     this.endGeometry(feature);
   }

src/ol/render/canvas/Executor.js

@@ -731,6 +731,7 @@ class Executor {
           const geometry = /** @type {import("../../geom/SimpleGeometry.js").default} */ (instruction[3]);
           const renderer = instruction[4];
           const fn = instruction.length == 6 ? instruction[5] : undefined;
+          const coordsLength = instruction.length >= 7 ? instruction[6] : 2;
           state.geometry = geometry;
           state.feature = feature;
           if (!(i in coordinateCache)) {
@@ -740,9 +741,10 @@ class Executor {
           if (fn) {
             fn(pixelCoordinates, d, dd, 2, coords);
           } else {
-            coords[0] = pixelCoordinates[d];
+            for (let index = 0; index < coordsLength; index++) {
-            coords[1] = pixelCoordinates[d + 1];
+              coords[index] = pixelCoordinates[d + index];
-            coords.length = 2;
+            }
+            coords.length = coordsLength;
           }
           renderer(coords, state);
           ++i;