From f4048b1aec48611746cf82fdfa2821678fa519b2 Mon Sep 17 00:00:00 2001
From: Rockingcool <aadhavan@twomorecents.org>
Date: Sun, 4 Jan 2026 13:08:54 -0600
Subject: [PATCH] Draw numbers on the marker after highlighting them

---
 js/src/guitar-diagrams-web-component.mjs | 27 +++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/js/src/guitar-diagrams-web-component.mjs b/js/src/guitar-diagrams-web-component.mjs
index a9ca964..e857895 100644
--- a/js/src/guitar-diagrams-web-component.mjs
+++ b/js/src/guitar-diagrams-web-component.mjs
@@ -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,
       );