<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.addCanvas('diagram-1');gdj1.addCanvasToElement('diagram-1');let gdj1 = new GuitarDiagramsJS();
gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
-gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
+gdj1.addCanvasToElement('diagram-1'); // add the canvas to the specified element ID on the page
gdj1.drawNeck(); // draw the fretboardlet gdj2 = new GuitarDiagramsJS();
gdj2.config.canvasID = 'diagram-2-canvas';
gdj2.config.stringNamesEnabled = true;
-gdj2.addCanvas('diagram-2');
+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'
@@ -99,7 +99,7 @@ Code
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.addCanvas('diagram-3');
+gdj3.addCanvasToElement('diagram-3');
gdj3.drawNeck();
gdj3.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj3.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -135,7 +135,7 @@ Code
let gdj4 = new GuitarDiagramsJS();
gdj4.config.canvasID = 'diagram-4-canvas';
gdj4.config.scaleFactor = .6; // set scaling factor (.6 == 60%)
-gdj4.addCanvas('diagram-4');
+gdj4.addCanvasToElement('diagram-4');
gdj4.drawNeck();
gdj4.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj4.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -189,7 +189,7 @@ Code
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.addCanvas('diagram-5');
+gdj5.addCanvasToElement('diagram-5');
gdj5.drawNeck();
gdj5.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj5.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -224,7 +224,7 @@ Code
gdj6.config.controlsEnabled = true;
gdj6.config.downloadImageEnabled = true;
gdj6.config.changeOrientationEnabled = true;
-gdj6.addCanvas('diagram-6');
+gdj6.addCanvasToElement('diagram-6');
gdj6.drawNeck();
gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj6.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
diff --git a/docs/examples/js/guitar-diagrams-js/guitar-diagrams.mjs b/docs/examples/js/guitar-diagrams-js/guitar-diagrams.mjs
index b9357ae..e114173 100644
--- a/docs/examples/js/guitar-diagrams-js/guitar-diagrams.mjs
+++ b/docs/examples/js/guitar-diagrams-js/guitar-diagrams.mjs
@@ -154,7 +154,7 @@ export class GuitarDiagramsJS {
let stringNamesIndent = this.#config.fretStartingNumber == 0 ? 0 : fretNumberFontSize;
let posX;
let posY;
- let stringNames = this.#config.stringNames;
+ let stringNames = [...this.#config.stringNames]; // deep copy array
// vertical draws string names left to right, but horizontal needs to draw them bottom to top
if (this.#config.orientHorizontally == true) {
@@ -561,13 +561,13 @@ export class GuitarDiagramsJS {
const controlClass = 'guitar-diagrams-control';
const controlClassPrefix = 'guitar-diagrams-';
- let canvasElement = document.getElementById(this.#config.canvasID);
+ const canvasElement = document.getElementById(this.#config.canvasID);
- let controlsDiv = document.createElement('div');
+ const controlsDiv = document.createElement('div');
controlsDiv.style = 'display: block; margin-top: .5em';
canvasElement.insertAdjacentElement('afterend', controlsDiv);
- // add the controls in reverse order of display order
+ // add the controls in reverse order of desired display order (last to first)
// other controls go here
/*
if (this.#config.someFeatureEnabled) {
@@ -667,9 +667,9 @@ export class GuitarDiagramsJS {
* Adds the canvas element to the parent element with the specified ID.
* @param {string} paramParentElementID - The parent element's ID to which the canvas element will be added.
*/
- addCanvas(paramParentElementID) {
+ addCanvasToElement(paramParentElementID) {
document.getElementById(paramParentElementID).appendChild(this.getCanvasElement());
- } // end addCanvas method
+ } // end addCanvasToElement method
/**
* Sets the canvas element's ID for an existing canvas.
diff --git a/docs/examples/js/main.js b/docs/examples/js/main.js
index 7251d7d..143b2b5 100644
--- a/docs/examples/js/main.js
+++ b/docs/examples/js/main.js
@@ -13,7 +13,7 @@ import { GuitarDiagramsJS } from './guitar-diagrams-js/guitar-diagrams.mjs';
// ========== BEGIN example 1
let gdj1 = new GuitarDiagramsJS();
gdj1.config.canvasID = 'diagram-1-canvas'; // specify the canvas element's an ID
-gdj1.addCanvas('diagram-1'); // add the canvas to the specified element ID on the page
+gdj1.addCanvasToElement('diagram-1'); // add the canvas to the specified element ID on the page
gdj1.drawNeck(); // draw the fretboard
// ========== END example 1
@@ -21,7 +21,7 @@ gdj1.drawNeck(); // draw the fretboard
let gdj2 = new GuitarDiagramsJS();
gdj2.config.canvasID = 'diagram-2-canvas';
gdj2.config.stringNamesEnabled = true;
-gdj2.addCanvas('diagram-2');
+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'
@@ -41,7 +41,7 @@ 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.addCanvas('diagram-3');
+gdj3.addCanvasToElement('diagram-3');
gdj3.drawNeck();
gdj3.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj3.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -57,7 +57,7 @@ gdj3.drawAllMarkers();
let gdj4 = new GuitarDiagramsJS();
gdj4.config.canvasID = 'diagram-4-canvas';
gdj4.config.scaleFactor = .6; // set scaling factor (.6 == 60%)
-gdj4.addCanvas('diagram-4');
+gdj4.addCanvasToElement('diagram-4');
gdj4.drawNeck();
gdj4.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj4.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -84,7 +84,7 @@ gdj5.config.colorDiagramBackground = '#000000'; // specify the diagram backgroun
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.addCanvas('diagram-5');
+gdj5.addCanvasToElement('diagram-5');
gdj5.drawNeck();
gdj5.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj5.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
@@ -103,7 +103,7 @@ gdj6.config.stringNamesEnabled = true;
gdj6.config.controlsEnabled = true;
gdj6.config.downloadImageEnabled = true;
gdj6.config.changeOrientationEnabled = true;
-gdj6.addCanvas('diagram-6');
+gdj6.addCanvasToElement('diagram-6');
gdj6.drawNeck();
gdj6.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdj6.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
diff --git a/docs/examples/js/testing.js b/docs/examples/js/testing.js
index b49fa94..02c4683 100644
--- a/docs/examples/js/testing.js
+++ b/docs/examples/js/testing.js
@@ -22,7 +22,7 @@ gdjTesting.config.enableAllControls();
//gdjTesting.config.changeOrientationEnabled = true;
//gdj4.config.scaleFactor = .5;
-gdjTesting.addCanvas('diagram-testing');
+gdjTesting.addCanvasToElement('diagram-testing');
gdjTesting.drawNeck();
gdjTesting.addMarker(1, 1, '1', GuitarDiagramsJS.Shape.Square);
gdjTesting.addMarker(2, 2, '2', GuitarDiagramsJS.Shape.Triangle);
diff --git a/docs/index.md b/docs/index.md
index 51abbd7..ffae2c4 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -37,7 +37,7 @@ If you want to use a CDN-hosted package (e.g., Guitar Diagrams JS on JSDelivr at
```
-Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
+Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvasToElement('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
```html
@@ -62,7 +62,7 @@ You can also install this package manually by downloading it, placing the files
```
-1. Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvas('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
+1. Be sure to add some target HTML element to your page with a matching ID (`gdj1.addCanvasToElement('diagram-1');` where `'diagram-1'` is the ID) in your JS code so Guitar Diagrams JS knows where to add your drawing:
```html
@@ -89,7 +89,7 @@ After your import statement, add the JavaScript to associate your block-level el
```javascript
let gdj1 = new GuitarDiagramsJS();
gdj1.config.canvasID = 'diagram-1-canvas';
-gdj1.addCanvas('diagram-1');
+gdj1.addCanvasToElement('diagram-1');
gdj1.drawNeck();
```
@@ -99,7 +99,7 @@ This will result in the most basic guitar diagram of a blank fretboard. The foll
| ---- | ---- | ----------- | ----- |
| 1 | `let gdj1 = new GuitarDiagramsJS();`| Instantiate a new `GuitarDiagramsJS` object and assign it to the `gdj1` variable| |
| 2 | `gdj1.config.canvasID = 'diagram-1-canvas';` | Set the canvasID value of the gdj1's config object to `'diagram-1-canvas'` | `'diagram-1-canvas'` is a unique ID for the `