Applying different colors to the Treble and/or Bass Clef symbols

[Soren74]

Hello,

I'm following up on my previous question re coloring notes (posted here: #1535)

Just wondering if it's possible to fill the Treble and/or Bass Clef symbols themselves with different colors?
If so how?

And what about the canvas element upon which the Stave is drawn?
I tried doing the following but it didn't work:

const context = renderer.getContext();
context.backgroundFillStyle = "red";

Thank you.

[rvilarl]

I guess that the only way is to place a rect behind the stave. I am not aware of any function doing that in VexFlow.

[sschmidTU]

In OSMD we just use context.setFillStyle and context.setStrokeStyle before drawing, though we still use Vexflow 1.2.93, not sure if it changed.

[AaronDavidNewman]

I realized after typing this that it doesn't help you since you are using canvas. It looks like you want to set the stave and clef to different colors. In canvas it might be possible to create a clef using new Clef, add it to the stave using addClef, and then setting the context on the clef before rendering. But I have not tried this.

In SVG it is possible with css. You can set and ID for the whole measure group, and find the vf-clef inside it:

$('#auto9739').find('.vf-clef').css('fill','blue')