You might be able to use StaveText, which is a StaveModifier. see
stavetext.js.
in OSMD, for labels, we calculate the position we want to draw
something and draw it using filltext:
(Typescript)
public renderText(fontHeight: number, fontStyle: FontStyles, font: Fonts, text: string,
heightInPixel: number, screenPosition: PointF2D, color: string = undefined): void {
this.ctx.save();
if (color) {
this.ctx.attributes.fill = color;
this.ctx.attributes.stroke = color;
}
this.ctx.setFont("Times New Roman", fontHeight, VexFlowConverter.fontStyle(fontStyle));
// font size is set by VexFlow in `pt`. This overwrites the font so it's set to px instead
this.ctx.attributes["font-size"] = `${fontHeight}px`;
this.ctx.state["font-size"] = `${fontHeight}px`;
this.ctx.fillText(text, screenPosition.x, screenPosition.y + heightInPixel);
this.ctx.restore();
}
For the position, there's stavenote.
getNoteHeadBeginX(), endX,
and stavenote.getBoundingBox().getX, getY, getW, getY()