Try it live! GitHub

BitmapIt Documentation

by Om Preetham

Installation Basic Usage Customization API Reference Examples

Installation

npm install bitmapit

Or include directly in your HTML:

<script type="module">
  import { BitmapFontGenerator } from './path/to/bitmapit/index.js';
</script>

Basic Usage

import { defaultFont, BitmapFontGenerator } from 'bitmapit';

// Create generator
const generator = new BitmapFontGenerator();

// Define characters
Object.entries(defaultFont).forEach(([char, pattern]) => {
  generator.defineCharacter(char, pattern);
});

// Generate text
const bitmap = generator.generateText('HELLO');
console.log(generator.toAscii(bitmap));

Customization Options

Font Dimensions

const generator = new BitmapFontGenerator({
  width: 8,    // Character width
  height: 8,   // Character height
  spacing: 1   // Space between characters
});

Display Options

const generator = new BitmapFontGenerator({
  onChar: '█',           // Character for filled pixels
  offChar: ' ',          // Character for empty pixels
  color: '#ffffff',      // Text color (HTML only)
  backgroundColor: '#000000'  // Background color (HTML only)
});

API Reference

constructor(options)

Creates a new bitmap font generator instance.

options.width: Number (default: 8) - Width of each character
options.height: Number (default: 8) - Height of each character
options.spacing: Number (default: 1) - Space between characters
options.onChar: String (default: '█') - Character for filled pixels
options.offChar: String (default: ' ') - Character for empty pixels

defineCharacter(char, pattern)

Defines a new character pattern.

generator.defineCharacter('A', [
  [0,1,1,1,0],
  [1,0,0,0,1],
  [1,1,1,1,1],
  [1,0,0,0,1],
  [1,0,0,0,1]
]);

generateText(text)

Generates a bitmap pattern for the given text.

const bitmap = generator.generateText('HELLO');

toAscii(bitmap, options)

Converts a bitmap to ASCII art.

const ascii = generator.toAscii(bitmap, { 
  on: '█', 
  off: ' ' 
});

toHtml(bitmap, options)

Converts a bitmap to HTML with styling.

const html = generator.toHtml(bitmap, {
  color: '#ff0000',
  backgroundColor: '#000000',
  on: '█',
  off: ' '
});

setDimensions(width, height)

Updates the font dimensions.

generator.setDimensions(10, 10);

setSpacing(spacing)

Sets the spacing between characters.

generator.setSpacing(2);

Examples

Basic Example:
Custom Characters:
Different Sizes:
Special Characters:

Basic Text Generation

const generator = new BitmapFontGenerator();
Object.entries(defaultFont).forEach(([char, pattern]) => {
  generator.defineCharacter(char, pattern);
});

const bitmap = generator.generateText('HELLO');
console.log(generator.toAscii(bitmap));

Styled HTML Output

const bitmap = generator.generateText('HELLO');
const html = generator.toHtml(bitmap, {
  color: '#ff0000',
  backgroundColor: '#000000'
});
document.body.innerHTML = html;

Custom Character Style

const bitmap = generator.generateText('HELLO');
const ascii = generator.toAscii(bitmap, {
  on: '*',
  off: '.'
});

Dynamic Sizing

generator.setDimensions(12, 12);
generator.setSpacing(2);
const bitmap = generator.generateText('BIG');

Browser Support

The library works in all modern browsers that support ES6 modules.