I'm using heatmap.js to generate a heatmap for al the clicks on email newsletter, and the heatmap is rendering just fine. However i have an additional request in that i'd like to display the numeric value associated with each heatmap circle. I've attempted to modify the heatmap.js script to accomplish this task. The changes i've made (heatmap.js v2.0.5) are in the _drawAlpha function.

Directly below:

   shadowCtx.drawImage(tpl, rectX, rectY);

I've added the following:

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

This works to some extent but the biggest issue that i'm having is actually reading the numbers. Ideally i'd like the numbers printed in black but i can't get the fillStyle to take. FYI I've also tried shadowCtx.fillStyle = "black";. I don't get any errors, it just doesn't apply the color. The only way i'm able to get any change in the font color for the values is to adjust the globalAlpha. i've tried everything from .01 to .99 and none of these are really desirable. The colors range from yellow/green/purple to redish... So currently it looks like this:

I have no problem updating the font or font-size. The values are offset to the right because if i print them in the middle of the heatmap circle the text is unreadable. Ideally the text would be black and i could print it right in the heatmap circle and it would appear above the circles.

I'm really a novice when it comes to Javascript canvas programming so any help you can provide is appreciated.

Thanks!