Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Mtillmann/ishihara

Repository files navigation

Render Process

ishihara

Generate Ishihara test plate images for color vision deficiency testing.

Installation

npm i @mtillmann/ishihara

Usage

The async ishihara function takes an options-object (see below) and returns an instance of CirclePacker from the circlepacker-package.

Use any of CirclePacker's output helper methods to render the image.

You can pass a CirclePacker-options-object inside the options.circlePackerOptions property.

Using a Bundler

import ishihara from '@mtillmann/ishihara';

const image = (await ishihara()).asCanvas();
document.body.appendChild(image);
//or
ishihara().then((image) => {
  document.body.appendChild(image.asCanvas());
});

Module Script Tag

<script type="module">
  import ishihara from '.../@mtillmann/ishihara/dist/index.bundle.js';

  const image = (await ishihara()).asCanvas();
  document.body.appendChild(image);
</script>

Classic Script Tag

<script src=".../@mtillmann/ishihara/dist/index.bundle.iife.js"></script>
<script>
  const image = (await ishihara()).asCanvas();
  document.body.appendChild(image);
</script>

Options

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

Option Type Default Description
circlePackerOptions Partial<circlePackerOptions> {} Options for the 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)
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

About

ishihara rendering for the browser

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published