feat(a11y): add textures to fill options

src/chart_types/xy_chart/renderer/canvas/areas.ts

@@ -41,7 +41,7 @@ interface AreaGeometriesProps {
 }
 
 /** @internal */
-export function renderAreas(ctx: CanvasRenderingContext2D, props: AreaGeometriesProps) {
+export function renderAreas(ctx: CanvasRenderingContext2D, imgCanvas: HTMLCanvasElement, props: AreaGeometriesProps) {
   const { sharedStyle, highlightedLegendItem, areas, rotation, clippings, renderingArea } = props;
 
   withContext(ctx, (ctx) => {
@@ -54,7 +54,7 @@ export function renderAreas(ctx: CanvasRenderingContext2D, props: AreaGeometries
           rotation,
           renderingArea,
           (ctx) => {
-            renderArea(ctx, area, sharedStyle, clippings, highlightedLegendItem);
+            renderArea(ctx, imgCanvas, area, sharedStyle, clippings, highlightedLegendItem);
           },
           { area: clippings, shouldClip: true },
         );
@@ -96,6 +96,7 @@ export function renderAreas(ctx: CanvasRenderingContext2D, props: AreaGeometries
 
 function renderArea(
   ctx: CanvasRenderingContext2D,
+  imgCanvas: HTMLCanvasElement,
   glyph: AreaGeometry,
   sharedStyle: SharedGeometryStateStyle,
   clippings: Rect,
@@ -104,7 +105,7 @@ function renderArea(
   const { area, color, transform, seriesIdentifier, seriesAreaStyle, clippedRanges, hideClippedRanges } = glyph;
   const geometryStateStyle = getGeometryStateStyle(seriesIdentifier, sharedStyle, highlightedLegendItem);
   const fill = buildAreaStyles(color, seriesAreaStyle, geometryStateStyle);
-  renderAreaPath(ctx, transform, area, fill, clippedRanges, clippings, hideClippedRanges);
+  renderAreaPath(ctx, imgCanvas, transform, area, fill, clippedRanges, clippings, hideClippedRanges);
 }
 
 function renderAreaLines(

src/chart_types/xy_chart/renderer/canvas/primitives/path.ts

@@ -22,6 +22,8 @@ import { Rect, Stroke, Fill } from '../../../../../geoms/types';
 import { withContext, withClipRanges } from '../../../../../renderers/canvas';
 import { ClippedRanges } from '../../../../../utils/geometry';
 import { Point } from '../../../../../utils/point';
+import { drawPattern } from '../../../../../utils/themes/textures';
+import { TexturedStyles } from '../../../../../utils/themes/theme';
 import { renderMultiLine } from './line';
 
 /** @internal */
@@ -58,17 +60,25 @@ export function renderLinePaths(
 /** @internal */
 export function renderAreaPath(
   ctx: CanvasRenderingContext2D,
+  imgCanvas: HTMLCanvasElement,
   transform: Point,
   area: string,
   fill: Fill,
   clippedRanges: ClippedRanges,
   clippings: Rect,
   hideClippedRanges = false,
 ) {
+  const textures: TexturedStyles = {
+    type: 'square',
+    stroke: 'black',
+    rotation: 0.7,
+    scale: 20,
+  };
+  const pattern = drawPattern(ctx, textures, imgCanvas);
   if (clippedRanges.length > 0) {
     withClipRanges(ctx, clippedRanges, clippings, false, (ctx) => {
       ctx.translate(transform.x, transform.y);
-      renderPathFill(ctx, area, fill);
+      renderPathFill(ctx, area, fill, pattern);
     });
     if (hideClippedRanges) {
       return;
@@ -80,19 +90,24 @@ export function renderAreaPath(
         ...fill.color,
         opacity: opacity / 2,
       };
-      renderPathFill(ctx, area, { ...fill, color });
+      renderPathFill(ctx, area, { ...fill, color }, pattern);
     });
     return;
   }
   withContext(ctx, (ctx) => {
     ctx.translate(transform.x, transform.y);
-    renderPathFill(ctx, area, fill);
+    renderPathFill(ctx, area, fill, pattern);
   });
+  // drawPattern(imgCanvas, fill);
 }
 
-function renderPathFill(ctx: CanvasRenderingContext2D, path: string, fill: Fill) {
+function renderPathFill(ctx: CanvasRenderingContext2D, path: string, fill: Fill, pattern: CanvasPattern | null) {
   const path2d = new Path2D(path);
   ctx.fillStyle = RGBtoString(fill.color);
+  ctx.fill(path2d);
+  if (pattern) {
+    ctx.fillStyle = pattern;
+  }
   ctx.beginPath();
   ctx.fill(path2d);
 }

src/chart_types/xy_chart/renderer/canvas/renderers.ts

@@ -39,6 +39,8 @@ export function renderXYChartCanvas2d(
   clippings: Rect,
   props: ReactiveChartStateProps,
 ) {
+  const imgCanvas = document.createElement('canvas');
+
   withContext(ctx, (ctx) => {
     // let's set the devicePixelRatio once and for all; then we'll never worry about it again
     ctx.scale(dpr, dpr);
@@ -120,7 +122,7 @@ export function renderXYChartCanvas2d(
       // rendering areas
       (ctx: CanvasRenderingContext2D) => {
         withContext(ctx, (ctx) => {
-          renderAreas(ctx, {
+          renderAreas(ctx, imgCanvas, {
             areas: geometries.areas,
             clippings,
             renderingArea,

src/utils/themes/textures.ts

@@ -0,0 +1,87 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { TexturedStyles } from './theme';
+
+function linePaths(type: string, s: number): string {
+  switch (type) {
+    case 'line':
+      return `M ${s / 2}, 0 l 0, ${s}`;
+    case 'square':
+      return `M ${s / 4} ${s / 4} l ${s / 2} 0 l 0 ${s / 2} l ${-s / 2} 0 Z`;
+    case 'triangle':
+      return `M ${s / 2} 0 L ${s} ${s} L ${s} ${s / 2} Z`;
+    case 'cross':
+      return `M ${s / 4},${s / 4}l${s / 2},${s / 2}M${s / 4},${(s * 3) / 4}l${s / 2},${-s / 2}`;
+    default:
+      return `M ${s / 2}, 0 l 0, ${s}`;
+  }
+}
+
+/** @public */
+export function drawPattern(
+  mainCtx: CanvasRenderingContext2D,
+  textureStyle: TexturedStyles,
+  canvas: HTMLCanvasElement,
+) {
+  const { type, stroke, opacity, scale, rotation, fill } = textureStyle;
+  const size = scale || 10;
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d');
+
+  if (ctx !== null) {
+    ctx.globalAlpha = opacity || 1;
+    ctx.strokeStyle = stroke;
+
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.rotate(rotation);
+    ctx.translate(-canvas.width / 2, -canvas.height / 2);
+
+    switch (type) {
+      case 'circle':
+        ctx.beginPath();
+        ctx.arc(size / 2, size / 2, 5, 0, 2 * Math.PI);
+        if (fill === 0) {
+          ctx.stroke();
+        } else {
+          ctx.fill();
+        }
+        break;
+      case 'triangle':
+      case 'square':
+        ctx.beginPath();
+        if (fill === 0) {
+          ctx.stroke(new Path2D(linePaths(type, size)));
+        } else {
+          ctx.fill(new Path2D(linePaths(type, size)));
+        }
+        break;
+      case 'line':
+      case 'cross':
+        ctx.beginPath();
+        ctx.stroke(new Path2D(linePaths(type, size)));
+        break;
+      default:
+        break;
+    }
+    return mainCtx.createPattern(canvas, 'repeat');
+  }
+  return null;
+}

src/utils/themes/theme.ts

@@ -369,8 +369,28 @@ export interface LineStyle {
   dash?: number[];
 }
 
+/** @public */
+export interface TexturedStyles {
+  /* typed of texture designs currently supported */
+  type: 'line' | 'circle' | 'square' | 'triangle' | 'cross';
+  /* To fill the stoke with Color or ColorVariant */
+  stroke: Color | ColorVariant;
+  /* The angle of rotation required in radians */
+  rotation: number;
+  /* The opacity of each texture on the theme/series */
+  opacity?: number;
+  /* If the polygon textures should be filled or empty */
+  fill?: 0 | 1;
+  /* The size of the textures,defaulted as 10 */
+  scale?: number;
+  path?: string;
+  spacing?: number;
+}
+
 /** @public */
 export interface AreaStyle {
+  /* applying textures to the area on the theme/series */
+  texture?: TexturedStyles;
   /** is the area is visible or hidden ? */
   visible: boolean;
   /** a static fill color if defined, if not it will use the color of the series */