@guitar-chords/canvas

Use Canvas to generate guitar chords. View the chord diagrams it generates →.

Install

npm install @guitar-chords/canvas

Usage

options GuitarChords Instantiation Options, See GuitarChordsOptions.

import { GuitarChords } from '@guitar-chords/canvas'

const guitarChords = new GuitarChords({
  name: 'C',
  matrix: [
    [0, 0, 0, 0, 1, 0],
    [0, 0, 2, 0, 0, 0],
    [3, 4, 0, 0, 0, 0],
  ],
})
// get canvas element and append to body
document.querySelect('body').append(guitarChords.element)
// get data
console.log(guitarChords.data)

Property

data

Get the chord data.

• @returns GuitarChordsData See GuitarChordsData

element

Get the Canvas element of the GuitarChords

• @returns HTMLCanvasElement

gridRect

Get the size and position information of the chord grid.

• @returns GridRect See GridRect

height

Get the height of the chord

• @returns number

version

Get the version of the chord

• @returns string version 1.0.0

width

Get the width of the chord

• @returns number

Methods

render(options)

Re-render the chord diagram.

Param|Types|Required|Description :--|:--|:--|:-- options|Partial<GuitarChordsOptions>|no|Chord instantiation options, see GuitarChordsOptions

• @returns GuitarChords

Types

GridRect

Grid size and position information.

Prop|Types|Required|Description :--|:--|:--|:-- width|number|yes|Grid Width height|number|yes|Grid Height top|number|yes|The position of the top of the grid in the entire chord diagram right|number|yes|The position of the right of the grid in the entire chord diagram bottom|number|yes|The position of the bottom of the grid in the entire chord diagram left|number|yes|The position of the left of the grid in the entire chord diagram

GuitarChordsData

Guitar Chords All Options (Configuration Data).

Prop|Types|Required|Description :--|:--|:--|:-- autoRender|boolean|yes|Whether to automatically render when instantiated, the default is true defaultColor|string|yes|Default colors (except for the color of the finger number text) defaultLineWidth|number|yes|Default line width transpose|number|yes|Chord transposition value, 1 is a sharp semitone, -1 is a flat semitone, default is 0 transposeTextColor|string|yes|The font color of the chord transposition symbol is the same as the chord name font color by default name|string|yes|Chord Name nameFontSize|number|yes|Chord name font size nameTextColor|string|yes|Chord Name Color nameLetterSpacing|number|yes|The spacing between chord name letters, default is 0 spacing|number|yes|Spacing between chord names and the chord grid nutLineWidth|number|yes|The width of the nut line (default is the value of lineWidth) nutColor|string|yes|Nut Line Color fretsSpacing|number|yes|Fret Line Spacing fretsColor|string|yes|Fret Line Color fretsLineWidth|number|yes|Fret Line Width stringSpacing|number|yes|String line spacing stringColor|string|yes|String line color stringLineWidth|number|yes|String line width stringCount|number|yes|The number of strings, which is the value of matrix[i].length or 6 fingerRadius|number|yes|Radius of the fingering dot fingerCircleColor|string|yes|Fingering dot color showFingerNumber|boolean|yes|Whether to display the finger number, the default is true fingerNumberTextColor|string|yes|Finger number font color, default #fff startFrets|number|yes|The starting fret of the chord, default is 0 startFretsTextColor|string|yes|Starting grade font color matrix|number[][]|yes|Matrix of chord fingerings and number of frets (2D array with rows representing chords and columns representing frets) mergeFingerCircle|boolean|yes|Whether to merge fingering dots when playing barre/barre, default is false showNotesOutsideOfChords|boolean|yes|Used to configure whether to display a small cross x/o at the head of the empty string column, the default is false notesOutsideOfChords|Record<number, boolean>|yes|Whether to display open strings as notes outside of chords option {chord number (strings 1-6 for guitar): true or false} crossLineWidth|number|yes|The line thickness of the notes x/o outside the chord is the default string line width. Its length is the diameter of the fingering dot crossLineColor|string|yes|Line color for the non-chord tones x/o crossRadius|number|yes|The radius of the chord outside the tone x/o, the default is fingerRadius * 0.75 fontFamily|string|yes|Font, default Arial devicePixelRatio|number|yes|Device pixel ratio

GuitarChordsOptions

Required configuration options for chord strength, see GuitarChordsData

type GuitarChordsOptions = {
  name: string;
  matrix: GuitarChordsData['matrix'];
} & Omit<GuitarChordsData, 'stringCount'>

Constants

Chord Default Options

{
  autoRender: true,
  defaultColor: '#000',
  defaultLineWidth: 4,
  transpose: 0,
  fontFamily: 'Arial',
  name: '',
  nameFontSize: 60,
  spacing: 20,
  fretsSpacing: 50,
  stringSpacing: 30,
  fingerRadius: 15,
  showFingerNumber: true,
  fingerNumberTextColor: '#fff',
  startFrets: 0,
  matrix: [
    [0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0],
  ],
  mergeFingerCircle: false,
  showNotesOutsideOfChords: false,
  devicePixelRatio: window.devicePixelRatio || 1,
}