@mozaic-ds/chart/src/services/PatternFunctions.ts

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

export default function () {
  function getPatternCanvas(
    pattern: CanvasPattern,
    width = 50,
    height = 50
  ): HTMLCanvasElement {
    const canvas: HTMLCanvasElement = document.createElement('canvas');
    const ctx: CanvasRenderingContext2D | null = canvas.getContext('2d');
    if (!ctx) {
      return canvas;
    }
    canvas.width = width;
    canvas.height = height;
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, width, height);
    return canvas;
  }

  function getPatternIndexWithShift(
    dataSetIndex: number,
    patternShifting?: number
  ) {
    return (
      (patternShifting ? dataSetIndex + patternShifting : dataSetIndex) % 6
    );
  }

  return {
    getPatternCanvas,
    getPatternIndexWithShift
  };
}