Change ledge line color using VexFlow EasyScore

24 views Asked by At

I'm using VexFlow to display simple notes on a dark background.

Ledge lines have a default color of #444 which enhances them on a white background but makes them tricker to see on a dark background.

Is it possible to change the ledge lines when using EasyScore?

This is my code

const {Factory} = Vex.Flow;
// Create a VexFlow renderer attached to the DIV element with id="output"
const vf = new Factory({renderer: {elementId: 'output', width: 200}});
const score = vf.EasyScore();
const system = vf.System();
// Create a 4/4 treble stave and add a voice
const stave = system.addStave({
    voices: [
        score.voice(score.notes(`${noteName}6/w`)),
    ]
}).addClef('treble');
stave.context.setStrokeStyle('white');
stave.context.setFillStyle('white');

// I tried the following but none of the options work
// stave.context.setLedgerLineStyle('white');
// stave.setLedgerLineStyle('white');

vf.draw();

And this is the result
image

0

There are 0 answers