Bb-chord-symbol

HTML5's canvas' chord symbol rendering library.

• Bb-chord-symbol
  • Very important part
  • Install
  • Usage
    • import
    • Basic usage
    • Advanced usage
      • 1: tweaking the config
      • 2: Post layout processing
  • Well that's awesome!
  • License

Very important part

The "bb" in bb-chord-symbol is pronounced "B flat"

Install

npm i bb-format

Usage

import

import { BbFormat } from 'bb-format';

Basic usage

// Get a context to use for rendering
const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
 
// Create the renderer instance
const renderer = new BbFormat(ctx);
 
// Render your chord
formatter.fillChordSymbol('Bb7#9#5/D', 100, 100);

using font Petaluma Script

Advanced usage

1: tweaking the config

// Get a context to use for rendering
const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
 
// Create the renderer/formatter instance
const formatter = new BbFormat(singleCtx);
 
// Modify the formatter's config
const options = new BbChordSymbolOptions();
options.parentheses.type = '[]';
options.useMinusSignForMinorChords = false;
options.descriptor.verticalOffset = 0;
options.separator.angle = Math.PI * 20 / 360;
 
formatter.chordSymbolOptions = options;
 
// tweak the chord's pre-layout renderer's config
const renderConfig: RendererConfiguration = {
    useShortNamings: false,
    harmonizeAccidentals: true,
    transposeValue: 2, // transpose a whole tone above
}
formatter.rendererOptions = renderConfig;
 
 
// Render
formatter.fillChordSymbol('Ab7#9#5/D', 100, 100);

using font Petaluma Script

2: Post layout processing

// Get a context to use for rendering
const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
 
// Create the renderer/formatter instance
const formatter = new BbFormat(singleCtx);
 
// Get a laid out chord
const laidOutChord: BbText = formatter.layoutChordSymbol('Gb7#5b9/E');
if (!laidOutChord) {
    // You should handle here what happens if the chord could not be parsed.
    // This happens when it is not valid.
    return; // Probably, if you are inside a function.
}
 
// rotate the all extensions
// all extensions start with either a sharp or a flat
laidOutChord.fragments.filter((v: BbTextFragment) => {
    return v.text.startsWith("\u266F") || v.text.startsWith("\u266D"); // Unicode flat and sharp
}).forEach((v: BbTextFragment) => {
    v.angle = -Math.PI * 40 / 360; // Rotate 40 degrees anti-clockwise
});
 
// render
formatter.fillText(laidOutChord, 100, 100);

using font Petaluma Script

Well that's awesome!

bb-chord-symbol is licensed under the MIT License. That means you may do whatever you wish with it. However, developing such libraries takes considerable time and effort, so if you find it valuable, please consider supporting me with a donation via paypal.

License

MIT