Introduced opacity attribute in Fill class and added rendering logic.

src/ol/color.js

@@ -34,6 +34,23 @@ export function asString(color) {
  */
 const MAX_CACHE_SIZE = 1024;
 
+/**
+ * Return named color as an rgba string.
+ * @param {string} color Named color.
+ * @return {string} Rgb string.
+ */
+export function fromNamed(color) {
+  const el = document.createElement('div');
+  el.style.color = color;
+  if (el.style.color !== '') {
+    document.body.appendChild(el);
+    const rgb = getComputedStyle(el).color;
+    document.body.removeChild(el);
+    return rgb;
+  }
+  return '';
+}
+
 /**
  * We maintain a small cache of parsed strings.  Whenever the cache grows too large,
  * we delete an arbitrary set of the entries.

src/ol/colorlike.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/colorlike
  */
-import {toString} from './color.js';
+import {fromNamed,toString } from './color.js';
 
 /**
  * A type accepted by CanvasRenderingContext2D.fillStyle
@@ -26,3 +26,52 @@
   }
   return color;
 }
+
+/**
+ * Return named color as an rgba string or hex.
+ * @param {string} color Named color.
+ * @param {number} opacity Opacity value
+ * @return {string} Rgb string or hex.
+ */
+export function addOpacityToColor(color, opacity) {
+  // Handle color names
+  const colorToParse = fromNamed(color);
+  if (colorToParse.startsWith('#')) {
+    const rgbaColor = hexToRgba(colorToParse, opacity);
+    return rgbaColor;
+  }
+  if (colorToParse.startsWith('rgb')) {
+    const rgbParts = colorToParse.match(/(\d+)/g);
+    if (rgbParts.length === 3) {
+      const r = parseInt(rgbParts[0]);
+      const g = parseInt(rgbParts[1]);
+      const b = parseInt(rgbParts[2]);
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    }
+  }
+  return colorToParse != '' ? colorToParse : color; // Return unchanged for unsupported formats
+}
+
+/**
+ * Return named color as an rgba string or hex.
+ * @param {string} hexColor Named hexColor.
+ * @param {number} opacity Opacity value
+ * @return {string} Rgba string.
+ */
+function hexToRgba(hexColor, opacity) {
+  hexColor = hexColor.replace(/^#/, '');
+
+  if (hexColor.length === 3) {
+    hexColor = hexColor
+      .split('')
+      .map((char) => char + char)
+      .join('');
+  }
+
+  const bigint = parseInt(hexColor, 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}

src/ol/render/canvas/Builder.js

@@ -4,7 +4,7 @@
 import CanvasInstruction from './Instruction.js';
 import Relationship from '../../extent/Relationship.js';
 import VectorContext from '../VectorContext.js';
-import {asColorLike} from '../../colorlike.js';
+import {addOpacityToColor,asColorLike} from '../../colorlike.js';
 import {
   buffer,
   clone,
@@ -129,8 +129,8 @@
     return pixelRatio == 1
       ? dashArray
       : dashArray.map(function (dash) {
-          return dash * pixelRatio;
-        });
+        return dash * pixelRatio;
+      });
   }
 
   /**
@@ -304,8 +304,8 @@
         flatCoordinates =
           type == 'Polygon'
             ? /** @type {import("../../geom/Polygon.js").default} */ (
-                geometry
-              ).getOrientedFlatCoordinates()
+              geometry
+            ).getOrientedFlatCoordinates()
             : geometry.getFlatCoordinates();
         offset = this.drawCustomCoordinates_(
           flatCoordinates,
@@ -479,6 +479,12 @@
       state.fillStyle = asColorLike(
         fillStyleColor ? fillStyleColor : defaultFillStyle
       );
+      if (fillStyle.getOpacity() && fillStyle.getOpacity() != 1) {
+        state.fillStyle = addOpacityToColor(
+          state.fillStyle.toString(),
+          fillStyle.getOpacity()
+        );
+      }
     } else {
       state.fillStyle = undefined;
     }

src/ol/style/Fill.js

@@ -7,6 +7,7 @@
  * @property {import("../color.js").Color|import("../colorlike.js").ColorLike|null} [color=null] 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 {number} [opacity=1] Opacity.
  */
 
 /**
@@ -26,6 +27,7 @@ class Fill {
      * @type {import("../color.js").Color|import("../colorlike.js").ColorLike|null}
      */
     this.color_ = options.color !== undefined ? options.color : null;
+    this.opacity_ = options.opacity !== undefined ? options.opacity : 1;
   }
 
   /**
@@ -35,8 +37,10 @@ class Fill {
    */
   clone() {
     const color = this.getColor();
+    const opacity = this.getOpacity();
     return new Fill({
       color: Array.isArray(color) ? color.slice() : color || undefined,
+      opacity: opacity,
     });
   }
 
@@ -49,6 +53,15 @@ class Fill {
     return this.color_;
   }
 
+  /**
+   * Get the fill opacity.
+   * @return {number} Opacity.
+   * @api
+   */
+  getOpacity() {
+    return this.opacity_;
+  }
+
   /**
    * Set the color.
    *