diff --git a/src/ol/render/canvas.js b/src/ol/render/canvas.js
index 0dc981a605..bbc8f40d9d 100644
--- a/src/ol/render/canvas.js
+++ b/src/ol/render/canvas.js
@@ -18,19 +18,19 @@ import LabelCache from './canvas/LabelCache.js';
  * @typedef {Object} FillStrokeState
  * @property {import("../colorlike.js").ColorLike} [currentFillStyle]
  * @property {import("../colorlike.js").ColorLike} [currentStrokeStyle]
- * @property {string} [currentLineCap]
+ * @property {CanvasLineCap} [currentLineCap]
  * @property {Array<number>} currentLineDash
  * @property {number} [currentLineDashOffset]
- * @property {string} [currentLineJoin]
+ * @property {CanvasLineJoin} [currentLineJoin]
  * @property {number} [currentLineWidth]
  * @property {number} [currentMiterLimit]
  * @property {number} [lastStroke]
  * @property {import("../colorlike.js").ColorLike} [fillStyle]
  * @property {import("../colorlike.js").ColorLike} [strokeStyle]
- * @property {string} [lineCap]
+ * @property {CanvasLineCap} [lineCap]
  * @property {Array<number>} lineDash
  * @property {number} [lineDashOffset]
- * @property {string} [lineJoin]
+ * @property {CanvasLineJoin} [lineJoin]
  * @property {number} [lineWidth]
  * @property {number} [miterLimit]
  */
@@ -38,10 +38,10 @@ import LabelCache from './canvas/LabelCache.js';
 
 /**
  * @typedef {Object} StrokeState
- * @property {string} lineCap
+ * @property {CanvasLineCap} lineCap
  * @property {Array<number>} lineDash
  * @property {number} lineDashOffset
- * @property {string} lineJoin
+ * @property {CanvasLineJoin} lineJoin
  * @property {number} lineWidth
  * @property {number} miterLimit
  * @property {import("../colorlike.js").ColorLike} strokeStyle
@@ -92,7 +92,7 @@ export const defaultFillStyle = '#000';
 
 /**
  * @const
- * @type {string}
+ * @type {CanvasLineCap}
  */
 export const defaultLineCap = 'round';
 
@@ -113,7 +113,7 @@ export const defaultLineDashOffset = 0;
 
 /**
  * @const
- * @type {string}
+ * @type {CanvasLineJoin}
  */
 export const defaultLineJoin = 'round';
 
diff --git a/src/ol/render/canvas/Executor.js b/src/ol/render/canvas/Executor.js
index afb0198a8c..8c911a89db 100644
--- a/src/ol/render/canvas/Executor.js
+++ b/src/ol/render/canvas/Executor.js
@@ -207,8 +207,8 @@ class Executor extends Disposable {
       if (strokeKey) {
         context.strokeStyle = strokeState.strokeStyle;
         context.lineWidth = strokeWidth;
-        context.lineCap = /** @type {CanvasLineCap} */ (strokeState.lineCap);
-        context.lineJoin = /** @type {CanvasLineJoin} */ (strokeState.lineJoin);
+        context.lineCap = strokeState.lineCap;
+        context.lineJoin = strokeState.lineJoin;
         context.miterLimit = strokeState.miterLimit;
         if (context.setLineDash && strokeState.lineDash.length) {
           context.setLineDash(strokeState.lineDash);
diff --git a/src/ol/render/canvas/Immediate.js b/src/ol/render/canvas/Immediate.js
index b87f972234..871b41adb6 100644
--- a/src/ol/render/canvas/Immediate.js
+++ b/src/ol/render/canvas/Immediate.js
@@ -692,12 +692,12 @@ class CanvasImmediateRenderer extends VectorContext {
     const context = this.context_;
     const contextStrokeState = this.contextStrokeState_;
     if (!contextStrokeState) {
-      context.lineCap = /** @type {CanvasLineCap} */ (strokeState.lineCap);
+      context.lineCap = strokeState.lineCap;
       if (context.setLineDash) {
         context.setLineDash(strokeState.lineDash);
         context.lineDashOffset = strokeState.lineDashOffset;
       }
-      context.lineJoin = /** @type {CanvasLineJoin} */ (strokeState.lineJoin);
+      context.lineJoin = strokeState.lineJoin;
       context.lineWidth = strokeState.lineWidth;
       context.miterLimit = strokeState.miterLimit;
       context.strokeStyle = strokeState.strokeStyle;
@@ -712,7 +712,7 @@ class CanvasImmediateRenderer extends VectorContext {
       };
     } else {
       if (contextStrokeState.lineCap != strokeState.lineCap) {
-        contextStrokeState.lineCap = context.lineCap = /** @type {CanvasLineCap} */ (strokeState.lineCap);
+        contextStrokeState.lineCap = context.lineCap = strokeState.lineCap;
       }
       if (context.setLineDash) {
         if (!equals(contextStrokeState.lineDash, strokeState.lineDash)) {
@@ -724,7 +724,7 @@ class CanvasImmediateRenderer extends VectorContext {
         }
       }
       if (contextStrokeState.lineJoin != strokeState.lineJoin) {
-        contextStrokeState.lineJoin = context.lineJoin = /** @type {CanvasLineJoin} */ (strokeState.lineJoin);
+        contextStrokeState.lineJoin = context.lineJoin = strokeState.lineJoin;
       }
       if (contextStrokeState.lineWidth != strokeState.lineWidth) {
         contextStrokeState.lineWidth = context.lineWidth = strokeState.lineWidth;
diff --git a/src/ol/style/RegularShape.js b/src/ol/style/RegularShape.js
index b7fcf9b930..d30999e044 100644
--- a/src/ol/style/RegularShape.js
+++ b/src/ol/style/RegularShape.js
@@ -30,10 +30,10 @@ import ImageStyle from './Image.js';
  * @property {import("../colorlike.js").ColorLike} [strokeStyle]
  * @property {number} strokeWidth
  * @property {number} size
- * @property {string} lineCap
+ * @property {CanvasLineCap} lineCap
  * @property {Array<number>} lineDash
  * @property {number} lineDashOffset
- * @property {string} lineJoin
+ * @property {CanvasLineJoin} lineJoin
  * @property {number} miterLimit
  */
 
@@ -302,8 +302,8 @@ class RegularShape extends ImageStyle {
    * @protected
    */
   render() {
-    let lineCap = '';
-    let lineJoin = '';
+    let lineCap = defaultLineCap;
+    let lineJoin = defaultLineJoin;
     let miterLimit = 0;
     let lineDash = null;
     let lineDashOffset = 0;
@@ -417,8 +417,8 @@ class RegularShape extends ImageStyle {
         context.setLineDash(renderOptions.lineDash);
         context.lineDashOffset = renderOptions.lineDashOffset;
       }
-      context.lineCap = /** @type {CanvasLineCap} */ (renderOptions.lineCap);
-      context.lineJoin = /** @type {CanvasLineJoin} */ (renderOptions.lineJoin);
+      context.lineCap = renderOptions.lineCap;
+      context.lineJoin = renderOptions.lineJoin;
       context.miterLimit = renderOptions.miterLimit;
       context.stroke();
     }
diff --git a/src/ol/style/Stroke.js b/src/ol/style/Stroke.js
index d73b9b55e1..bee5ba1279 100644
--- a/src/ol/style/Stroke.js
+++ b/src/ol/style/Stroke.js
@@ -8,8 +8,8 @@
  * @property {import("../color.js").Color|import("../colorlike.js").ColorLike} [color] A color, gradient or pattern.
  * See {@link module:ol/color~Color} and {@link module:ol/colorlike~ColorLike} for possible formats.
  * Default null; if null, the Canvas/renderer default black will be used.
- * @property {string} [lineCap='round'] Line cap style: `butt`, `round`, or `square`.
- * @property {string} [lineJoin='round'] Line join style: `bevel`, `round`, or `miter`.
+ * @property {CanvasLineCap} [lineCap='round'] Line cap style: `butt`, `round`, or `square`.
+ * @property {CanvasLineJoin} [lineJoin='round'] Line join style: `bevel`, `round`, or `miter`.
  * @property {Array<number>} [lineDash] Line dash pattern. Default is `undefined` (no dash).
  * Please note that Internet Explorer 10 and lower do not support the `setLineDash` method on
  * the `CanvasRenderingContext2D` and therefore this option will have no visual effect in these browsers.
@@ -43,7 +43,7 @@ class Stroke {
 
     /**
      * @private
-     * @type {string|undefined}
+     * @type {CanvasLineCap|undefined}
      */
     this.lineCap_ = options.lineCap;
 
@@ -61,7 +61,7 @@ class Stroke {
 
     /**
      * @private
-     * @type {string|undefined}
+     * @type {CanvasLineJoin|undefined}
      */
     this.lineJoin_ = options.lineJoin;
 
@@ -107,7 +107,7 @@ class Stroke {
 
   /**
    * Get the line cap type for the stroke.
-   * @return {string|undefined} Line cap.
+   * @return {CanvasLineCap|undefined} Line cap.
    * @api
    */
   getLineCap() {
@@ -134,7 +134,7 @@ class Stroke {
 
   /**
    * Get the line join type for the stroke.
-   * @return {string|undefined} Line join.
+   * @return {CanvasLineJoin|undefined} Line join.
    * @api
    */
   getLineJoin() {
@@ -172,7 +172,7 @@ class Stroke {
   /**
    * Set the line cap.
    *
-   * @param {string|undefined} lineCap Line cap.
+   * @param {CanvasLineCap|undefined} lineCap Line cap.
    * @api
    */
   setLineCap(lineCap) {
@@ -208,7 +208,7 @@ class Stroke {
   /**
    * Set the line join.
    *
-   * @param {string|undefined} lineJoin Line join.
+   * @param {CanvasLineJoin|undefined} lineJoin Line join.
    * @api
    */
   setLineJoin(lineJoin) {