Guitar Diagrams JS - Examples

This page includes usage examples for Guitar Diagrams JS, an open source JavaScript library for drawing guitar neck diagrams. The full API documentation is also available.

Preface - Setup

Before adding the code to draw your diagram, you'll need to include the Guitar Diagrams JS library and provide a target element (e.g., a <div>) to which the app can add the canvas and begin drawing.

To include the library, use an import statement at the top of your script1 with the following:

import { GuitarDiagramsJS } from 'path/to/guitar-diagrams.mjs';

1The script can be an inline script with <script> tags, or it could be in its own JavaScript file that you include or reference in some other way.

To give Guitar Diagrams JS a place to add the drawing, you'll need to specify a block-level element with an ID, such as the following:

<div id="diagram-1"></div>

That div's ID doesn't need to be diagram-1 as shown, but it needs to be a unique name that you will reference later on in your code, like this:

gdj1.addCanvasToElement('diagram-1');

Example 1 - Basic fretboard

This example demonstrates the most basic usage with a vertical fretboard and no additional options.

Code
let gdj1 = new GuitarDiagramsJS();
gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
gdj1.addCanvasToElement('diagram-1'); // add the canvas to the specified element ID on the page
gdj1.drawNeck(); // draw the fretboard

Example 2 - Adding markers

This example shows a vertical fretboard with the following configuration options:

  • String names are enabled
  • Adds 7 markers of various shapes with one blank marker and two zero-fret (open string) markers
Code
let gdj2 = new GuitarDiagramsJS();
gdj2.config.canvasID = 'diagram-2-canvas';
gdj2.config.stringNamesEnabled = true;
gdj2.addCanvasToElement('diagram-2');
gdj2.drawNeck();
gdj2.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square); // add a square marker on string 1, fret 1, text '1'
gdj2.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle); // add a triangle marker on string 2, fret 2, text '2'
gdj2.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond); // add a diamond marker on string 3, fret 3, text '3'
gdj2.addMarker(4, 4, '4'); // add a default (circle) marker on string 4, fret 4, text '4'
gdj2.addMarker(5, 0, '0'); // add a default (circle) marker on string 5, fret 0, text '0'
gdj2.addMarker(6, 0, 'X'); // add a default (circle) marker on string 6, fret 0, text 'X'
gdj2.addMarker(3, 1); // add a default (circle) marker on string 3, fret 1, text empty
gdj2.drawAllMarkers(); // draw the markers

Example 3 - Changing string and fret count with custom string names and horizontal orientation

This example shows a horizontal fretboard with the following configuration options:

  • String names are enabled with custom string names (drop D, 4 strings for bass)
  • Horizontal orientation
  • Starting on the 3rd fret
  • Limited to only 3 frets
  • Adds the same 7 markers of various shapes with one blank marker (the same as the previous example), but 3 of them are off the fretboard so they aren't drawn
Code
let gdj3 = new GuitarDiagramsJS();
gdj3.config.canvasID = 'diagram-3-canvas';
gdj3.config.stringNamesEnabled = true; // set string names enabled
gdj3.config.orientHorizontally = true; // set horizontal orientation
gdj3.config.fretStartingNumber = 3; // set starting fret
gdj3.config.stringNames = ['D','A','D','G']; // set string names and count
gdj3.config.fretCount = 3; // set starting fret
gdj3.addCanvasToElement('diagram-3');
gdj3.drawNeck();
gdj3.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj3.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
gdj3.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);
gdj3.addMarker(4, 4, '4');
gdj3.addMarker(5, 5, '5');
gdj3.addMarker(6, 4, '6');
gdj3.addMarker(3, 1);
gdj3.drawAllMarkers();

The markers that would be rendered off the fretboard are logged in the browser's console log as the errors seen below:

guitar-diagrams.mjs:677 [State] GuitarDiagramsJS.addMarker(): { minFret: 0 | maxFret: 3 }
guitar-diagrams.mjs:679 [Error] GuitarDiagramsJS.addMarker(): Fret marker could not be placed on fretboard. { paramString: 4 | paramFret: 4 | paramText: 4 | paramShape: null }
guitar-diagrams.mjs:677 [State] GuitarDiagramsJS.addMarker(): { minFret: 0 | maxFret: 3 }
guitar-diagrams.mjs:679 [Error] GuitarDiagramsJS.addMarker(): Fret marker could not be placed on fretboard. { paramString: 5 | paramFret: 5 | paramText: 5 | paramShape: null }
guitar-diagrams.mjs:677 [State] GuitarDiagramsJS.addMarker(): { minFret: 0 | maxFret: 3 }
guitar-diagrams.mjs:679 [Error] GuitarDiagramsJS.addMarker(): Fret marker could not be placed on fretboard. { paramString: 6 | paramFret: 4 | paramText: 6 | paramShape: null }

Example 4 - Scaling

This example shows a vertical fretboard with the following configuration options:

  • Diagram scaled to 60% (.6)
  • Adds the same 7 markers of various shapes with one blank marker (the same as the previous examples)
Code
let gdj4 = new GuitarDiagramsJS();
gdj4.config.canvasID = 'diagram-4-canvas';
gdj4.config.scaleFactor = .6; // set scaling factor (.6 == 60%)
gdj4.addCanvasToElement('diagram-4');
gdj4.drawNeck();
gdj4.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj4.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
gdj4.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);
gdj4.addMarker(4, 4, '4');
gdj4.addMarker(5, 5, '5');
gdj4.addMarker(6, 4, '6');
gdj4.addMarker(3, 1);
gdj4.drawAllMarkers();

Example 5 - Customizing visuals

This example, while intentionally not very visually appealing, shows a vertical fretboard that has been customized with varying visual configuration options as shown below:

  • String names are enabled
  • Starting on the 2nd fret
  • Customize settings for the following:
    • Fretboard background color
    • Nut background and outline colors
    • Fret color
    • String color
    • Fret marker color
    • Diagram background color
    • Label color for string name and starting fret number
    • Marker's stroke width
    • Marker's font size
  • Adds the same 7 markers of various shapes with one blank marker (the same as the previous examples)
Code
let gdj5 = new GuitarDiagramsJS();
gdj5.config.canvasID = 'diagram-5-canvas';
gdj5.config.stringNamesEnabled = true;
gdj5.config.fretStartingNumber = 2;
gdj5.config.colorFretboard = '#FFE0B2'; // specify the fretboard background color
gdj5.config.colorNut = '#FFFFFF'; // specify the nut color
gdj5.config.colorNutOutline = '#7E5109'; // specify the nut outline color
gdj5.config.colorFrets = '#AEB6BF'; // specify the fret color
gdj5.config.colorStrings = '#566573'; // specify the string color
gdj5.config.colorFretMarkers = '#424949'; // specify the fret marker color
gdj5.config.colorDiagramBackground = '#000000'; // specify the diagram background color
gdj5.config.colorLabel = '#FFFFFF'; // specify the label color for string names and starting fret
gdj5.config.markerStrokeWidth = 1; // specify the marker's stroke width
gdj5.config.markerFontSize = 10; // specify the marker text's font size
gdj5.addCanvasToElement('diagram-5');
gdj5.drawNeck();
gdj5.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj5.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
gdj5.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);
gdj5.addMarker(4, 4, '4');
gdj5.addMarker(5, 5, '5');
gdj5.addMarker(6, 4, '6');
gdj5.addMarker(3, 1);
gdj5.drawAllMarkers();

Example 6 - Controls

This example demonstrates some configuration options for controls as shown below:

  • String names are enabled
  • Controls are enabled
    Controls must be enabled, then each individual control must be enabled to ensure that all controls are intentionally added. Alternatively, call gdj6.config.enableAllControls(); to enable controls and all individual controls.
  • Image download button is enabled
  • Change orientation button is enabled
  • Adds the same 7 markers of various shapes with one blank marker (the same as the previous examples)
Code
let gdj6 = new GuitarDiagramsJS();
gdj6.config.canvasID = 'diagram-6-canvas';
gdj6.config.stringNamesEnabled = true;
gdj6.config.controlsEnabled = true;
gdj6.config.downloadImageEnabled = true;
gdj6.config.changeOrientationEnabled = true;
gdj6.addCanvasToElement('diagram-6');
gdj6.drawNeck();
gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj6.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
gdj6.addMarker(3, 3, '3', GuitarDiagramsJS.Shape.Diamond);
gdj6.addMarker(4, 4, '4');
gdj6.addMarker(5, 5, '5');
gdj6.addMarker(6, 4, '6');
gdj6.addMarker(3, 1);
gdj6.drawAllMarkers();