patternomaly

Patternomaly allows you to generate HTML5 canvas patterns to improve data visualization accessibility (e.g., for color-blind users). You can generate a single pattern for a specific color using draw or an array of patterns for multiple colors using generate.

// Generate a single canvas pattern
pattern.draw('square', '#1f77b4');

// Generate an array of canvas patterns for an array of colors
pattern.generate([
  '#1f77b4',
  '#ff7f0e',
  '#2ca02c',
  '#d62728'
]);

Patternomaly includes a typings file. To use it in a TypeScript environment:

1. Import the functions in your .ts file: import {draw, generate} from 'patternomaly'

2. For Angular projects, ensure the JavaScript file is included in your build configuration (e.g., angular.cli.json) within the scripts array: "scripts": ["node_modules/patternomaly/dist/patternomaly.js"]

To use patternomaly in your project, install it using npm:

npm install patternomaly

You can use the draw method to assign specific patterns to the backgroundColor property of a Chart.js dataset. This is useful for providing visual texture alongside color.

datasets: [{
  data: [
    300, 50, 100, 210, 140
  ],
  backgroundColor: [
    pattern.draw('square', '#1f77b4'),
    pattern.draw('circle', '#ff7f0e'),
    pattern.draw('diamond', '#2ca02c'),
    pattern.draw('zigzag-horizontal', '#17becf'),
    pattern.draw('triangle', 'rgb(255, 99, 132, 0.4)') // with opacity
  ]
}]

When using the draw(key, color) method, you can specify one of the following 21 pattern variants as the key:

- plus
- cross
- dash
- cross-dash
- dot
- dot-dash
- disc
- ring
- line
- line-vertical
- weave
- zigzag
- zigzag-vertical
- diagonal
- diagonal-right-left
- square
- box
- triangle
- triangle-inverted
- diamond
- diamond-box

The draw function creates a reusable CanvasPattern object using a specific shape. This pattern can be used with the Canvas API's fillStyle property to fill shapes or areas with a repeating pattern.

Parameters:

• shapeType (string): The name of the shape to use (e.g., 'square'). Defaults to 'square'.
• backgroundColor (string): The background color of the shape tile.
• patternColor (string): The color of the pattern element itself.
• size (number): The size of the tile.

Returns: A CanvasPattern object that repeats the drawn shape.

import { draw } from 'patternomaly';

// Create a pattern using a square shape
const pattern = draw('square', 'white', 'blue', 10);

// Use it on a canvas context
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 100, 100);

The generate function takes an array of colors and returns an array of CanvasPattern objects. It automatically selects different shapes for each color to create visual variety, ensuring that adjacent patterns are different.

Parameters:

• colorList (Array<string>): An array of color strings (e.g., ['#ff0000', '#00ff00']).

Returns: An array of CanvasPattern objects, where each pattern corresponds to a color in the input list.

import { generate } from 'patternology';

const colors = ['#f00', '#0f0', '#00f'];
const patterns = generate(colors);

// patterns[0] is a CanvasPattern using '#f00'
// patterns[1] is a CanvasPattern using '#0f0', etc.

The patternomaly library provides two primary functions for working with patterns: draw and generate. These are exported as the default export of the package.

• draw: Used to render or draw a pattern.
• generate: Used to create or generate a pattern structure.

import pattern from 'patternomaly';

// pattern contains draw and generate
pattern.draw(...);
pattern.generate(...);