Estoy usando heatmap.js para generar un mapa de calor para todos los clics en el boletín informativo por correo electrónico, y el mapa de calor funciona bien. Sin embargo, tengo una solicitud adicional en la que me gustaría mostrar el valor numérico asociado con cada círculo de mapa de calor. Intenté modificar el script heatmap.js para realizar esta tarea. Los cambios que hice (heatmap.js v2.0.5) están en la función _drawAlpha.

Directamente debajo:

 shadowCtx.drawImage(tpl, rectX, rectY);

He añadido lo siguiente:

 shadowCtx.font = "bold 35px sans-serif"; shadowCtx.fillStyle = "#000000"; shadowCtx.globalAlpha = 1; shadowCtx.fillText(value, rectX+55, rectY+35);

Esto funciona hasta cierto punto, pero el mayor problema que tengo es leer los números. Idealmente, me gustaría que los números se impriman en negro, pero no puedo obtener el estilo de relleno. Para su información, también probé shadowCtx.fillStyle = "black";. No me sale ningún error, simplemente no aplica el color. La única forma en que puedo obtener algún cambio en el color de la fuente para los valores es ajustar globalAlpha. Probé todo, desde .01 hasta .99 y ninguno de estos es realmente deseable. Los colores van desde amarillo/verde/púrpura hasta rojizo... Así que actualmente se ve así:

No tengo ningún problema para actualizar la fuente o el tamaño de fuente. Los valores están desplazados hacia la derecha porque si los imprimo en el medio del círculo del mapa de calor, el texto es ilegible. Idealmente, el texto sería negro y podría imprimirlo directamente en el círculo del mapa de calor y aparecería encima de los círculos.

Realmente soy un novato en lo que respecta a la programación de lienzo de Javascript, por lo que se agradece cualquier ayuda que pueda brindar.

¡Gracias!