https://github.com/mtillmann/ishihara

ishihara rendering for the browser
https://github.com/mtillmann/ishihara

accessibility color-vision-deficiency colorblindness ishihara-plates

Last synced: 24 days ago
JSON representation

ishihara rendering for the browser

• Host: GitHub
• URL: https://github.com/mtillmann/ishihara
• Owner: Mtillmann
• Created: 2024-12-07T21:06:42.000Z (27 days ago)
• Default Branch: main
• Last Pushed: 2024-12-07T21:49:12.000Z (26 days ago)
• Last Synced: 2024-12-07T21:58:23.398Z (26 days ago)
• Topics: accessibility, color-vision-deficiency, colorblindness, ishihara-plates
• Language: TypeScript
• Homepage:
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
![Render Process](./ishihara.png)

# ishihara

Generate [Ishihara test plate](https://en.wikipedia.org/wiki/Ishihara_test) images for color vision deficiency testing.

## Installation

`npm i @mtillmann/ishihara`

## Usage

The `ishihara` function takes an options-object (see below) and returns an instance of `CirclePacker` from the [circlepacker-package](https://github.com/Mtillmann/circlepacker).

Use any of `CirclePacker`'s [output helper methods](https://github.com/Mtillmann/circlepacker?tab=readme-ov-file#output-helpers) to render the image.

You can pass a [CirclePacker-options-object](https://github.com/Mtillmann/circlepacker?tab=readme-ov-file#options) inside the `options.circlePackerOptions` property.

### Using a Bundler

```javascript

import ishihara from '@mtillmann/ishihara';

const image = ishihara().asCanvas();

document.body.appendChild(image);

```

### Module Script Tag

```html

  import ishihara from '.../@mtillmann/ishihara/dist/index.bundle.js';

  const image = ishihara().asCanvas();

  document.body.appendChild(image);

```

### Classic Script Tag

```html

  const image = ishihara().asCanvas();

  document.body.appendChild(image);

```

## Options

The `ishihara` function takes an options object with the following properties:

| Option              | Type                         | Default                 | Description                                                                    |

| ------------------- | ---------------------------- | ----------------------- | ------------------------------------------------------------------------------ |

| circlePackerOptions | Partial\ | {}                      | [Options for the CirclePacker](https://github.com/Mtillmann/circlepacker)                                                  |

| textColors          | string[]                     | ['#ffffff']             | Colors for the text                                                            |

| backgroundColors    | string[]                     | ['#000000']             | Colors for the background                                                      |

| text                | string                       | '8'                     | Text to display, max 2 characters                                              |

| font                | string                       | 'bold 256px sans-serif' | Font for the text ([see](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font))                                                              |

| radius              | number\|'auto'             | 'auto'                  | Radius of the circles, 'auto' will calculate the radius based on the text size |

| padding             | number\|string             | '20%'                   | Padding around the text, can be a number or a percentage                       |

| margin              | number\|string             | '10%'                   | Margin around the image, can be a number or a percentage                       |

| debug               | boolean                      | false                   | renders debug image with same output api as CirclePacker                       |