How to use opacity to make notes transparents?

[davidedelvento]

I have a staff with two voices (as a possible workaround to #770 but that's irrelevant) as follows:

var VF = Vex.Flow;
var voice_note;
var voice_text;
var ctx;
var topStaff;

var canvas = document.getElementById('spartito');
var renderer = new VF.Renderer(canvas, VF.Renderer.Backends.SVG);
ctx = renderer.getContext();
renderer.resize(500, 500);

topStaff = new VF.Stave(20, 100, 500);
topStaff.addClef('treble');

topStaff.setContext(ctx).draw();

var note_list = ['G/5', 'A/5', 'B/5', 'C/6'];

var total_notes = 4;

voice_note = new VF.Voice({num_beats: total_notes,  beat_value: 4});
voice_text = new VF.Voice({num_beats: total_notes,  beat_value: 4});
var js_note_list = [];
var js_text_list = [];

for (var upper_note of note_list) {
  var background_color = 'red';
  var position = 'A/6';

  var note = new VF.StaveNote({clef: "treble", keys: [upper_note], duration: "q", auto_stem: true });
  js_note_list.push(note);
  var word = new VF.StaveNote({ clef: "treble", keys: [position],  duration: 'q' });
  word.setStyle({ fillStyle: background_color, strokeStyle: background_color, opacity: 0.1 });
  word.style.opacity = 0.1;
  word.setLedgerLineStyle({ fillStyle: background_color, strokeStyle: background_color });
  js_text_list.push(word);
}

voice_note.addTickables(js_note_list);
voice_text.addTickables(js_text_list);
var formatter = new VF.Formatter().joinVoices([voice_note, voice_text]).format([voice_note, voice_text], 500);
voice_note.draw(ctx, topStaff);
voice_text.draw(ctx, topStaff);

which results in this:

As you can see opacity is not respected, whereas the background_color is. I can almost make it to work selecting white as background color, but that's sloppy because the ledger lines cover other notes. Opacity is mentioned briefly in the wiki but that's in context of NoteGroups. Is that the only way to make it work?

https://jsfiddle.net/zh4j9p7m/

[h-sug1no]

I think you can specify background_color with alpha like the follows:
var background_color = 'rgba(255,0,0,0.1)';

https://jsfiddle.net/8Lmgu3de/

is this OK?

[0xfe]

Closing this because there's an answer.

@davidedelvento, best place to ask questions is the VexFlow google group.

[davidedelvento]

Hi @0xfe -- thanks for your kindness and patience with all the questions from this user. I'll use the google group in the future. And I as I said elsewhere, thanks also for creating and maintaining such a fantastic library!