How to change colour of a note

[Prem Anand]

Hi, I started exploring vexflow and it is amazing. Great work and many thanks.

I am wondering how to change the styles of the notes that are being rendered as group. Please help me if anyone knows.

[Simon Schmid]

Notes rendered together are a stavenote, see stavenote.js.
There are methods like setStyle, setStemStyle, etc.
Of course, you can extract code from these to do your custom styling.

Here's an example from OSMD:
(i hope the formatting is alright)

if (vfStaveNote) {

if (vfStaveNote.note_heads) { // see VexFlowConverter, needs Vexflow PR

let noteheadColor: string = "#00FF00";

const notehead: any = vfStaveNote.note_heads[i];

if (notehead) {

vfStaveNote.note_heads[i].setStyle({ fillStyle: noteheadColor, strokeStyle: noteheadColor });

}

}

}

// color stems

let stemColor: string = "#FF0000";

const stemStyle: Object = { fillStyle: stemColor, strokeStyle: stemColor };

vfStaveNote.setStemStyle(stemStyle);

if (vfStaveNote.flag && vfStaveNote.setFlagStyle && EngravingRules.Rules.ColorFlags) {

vfStaveNote.setFlagStyle(stemStyle);

}

Head size is best set in the struct of the StaveNote constructor:

if (IsCueNote) {

vfnoteStruct.glyph_font_scale = Vex.Flow.DEFAULT_NOTATION_FONT_SCALE * Vex.Flow.GraceNote.SCALE;

vfnoteStruct.stroke_px = Vex.Flow.GraceNote.LEDGER_LINE_OFFSET;

} staveNote = new StaveNote(vfnotestruct);

You can even change these things (except the struct part maybe) after the notes were rendered, you just might need to render them again.

Hope that helps.

[Simon Schmid]

This is StaveNot.setStyle():

// Sets the style of the complete StaveNote, including all keys

// and the stem.

setStyle(style) {

super.setStyle(style);

this.note_heads.forEach(notehead => notehead.setStyle(style));

this.stem.setStyle(style);

}

[Simon Schmid]

OSMD example is from VexFlowConverter.ts:
https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/blob/develop/src/MusicalScore/Graphical/VexFlow/VexFlowConverter.ts

It's in Typescript, but you can adapt it to Javascript with a few changes.