Rockingcool/interactive-fretboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Draw numbers on the marker after highlighting them

Browse Source
This commit is contained in:
Aadhavan Srinivasan
2026-01-04 13:08:54 -06:00
parent cf6322b511
commit f4048b1aec
1 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
js/src/guitar-diagrams-web-component.mjs
View File

@@ -878,11 +878,24 @@ class GuitarDiagramsWebComponent extends HTMLElement {
timeGap += 0.5;
// Draw black after a timeout. This timeout is incremented by 0.5 from the 'draw yellow' one.
// Also draw the numbers for the marker if they exist
setTimeout(() => {
canvas.beginPath();
canvas.fillStyle = "black";
this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
canvas.closePath();
canvas.beginPath();
canvas.fillStyle = marker.colorFont;
canvas.textAlign = "center";
canvas.textBaseline = "middle";
canvas.font = this.#scale(this.#config.markerFontSize) + "px Arial";
canvas.fillText(
marker.text,
marker.relativePosX,
marker.relativePosY + this.#scale(this.#config.markerStrokeWidth),
);
canvas.fill();
canvas.closePath();
}, timeGap * 1000);
});
this.#outputSpeaker.triggerRelease(allNoteFrequencies, now + timeGap + 0.5);
@@ -908,7 +921,7 @@ class GuitarDiagramsWebComponent extends HTMLElement {
this.#outputSpeaker.triggerRelease(allNoteFrequencies, now + timeGap + 2);
// Draw everything black
// Draw everything black and add numbers for the marker if they exist
this.#markers.forEach((marker) => {
setTimeout(
() => {
@@ -916,6 +929,18 @@ class GuitarDiagramsWebComponent extends HTMLElement {
canvas.fillStyle = "black";
this.#drawMarkerCircle(marker.relativePosX, marker.relativePosY);
canvas.closePath();
canvas.beginPath();
canvas.fillStyle = marker.colorFont;
canvas.textAlign = "center";
canvas.textBaseline = "middle";
canvas.font = this.#scale(this.#config.markerFontSize) + "px Arial";
canvas.fillText(
marker.text,
marker.relativePosX,
marker.relativePosY + this.#scale(this.#config.markerStrokeWidth),
);
canvas.fill();
canvas.closePath();
},
(timeGap + 1) * 1000,
);