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.
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');
This example demonstrates the most basic usage with a vertical fretboard and no additional options.
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
This example shows a vertical fretboard with the following configuration options:
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
This example shows a horizontal fretboard with the following configuration options:
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 }
This example shows a vertical fretboard with the following configuration options:
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();
This example, while intentionally not very visually appealing, shows a vertical fretboard that has been customized with varying visual configuration options as shown below:
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();
This example demonstrates some configuration options for controls as shown below:
gdj6.config.enableAllControls();
to enable controls and all individual controls.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();
Guitar Diagram JS