Changing Fill-Color of Notes

[Soren74]

Is it really possible to change the color of the notes?
I found the attached image in the "tests" section of the website (https://www.vexflow.com/tests/)
And I also see in the element.ts document a property called fillStyle -- I just can't figure out how to access it.

So for example if I have:

        new StaveNote({ keys: ["b/4"], duration: "qr" }),

How can I set it's fillStyle property to a specific color?

Would really appreciate any help would this.

Thank you!

export interface ElementStyle {
... 
fillStyle?: string;
  /**
   * CSS color used with context stroke command.
   *
   * Examples: 'red', '#ff0000', '#ff000010', 'rgb(255,0,0)'
   *
   * See [CSS Legal Color Values](https://www.w3schools.com/cssref/css_colors_legal.asp)
   */

[rvilarl]

You have to use setStyle, example attached

https://jsfiddle.net/Lh81o4wg/

[Soren74]

Wow - so simple!
Thank you so much!

[Soren74]

wait - can the canvas itself be painted?
Meaning the canvas upon which the entire Stave is drawn?

I tried the following - and it's not working:

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

[ronyeh]

A good way to figure out how to use VexFlow is to treat the vexflow/tests/ folder as example code. If you dig around in there, you'll start to get a sense of how to work with VexFlow: https://github.com/0xfe/vexflow/tree/master/tests

vexflow/tests/stavenote_tests.ts

Lines 664 to 682 in 9d7ab82

	function drawKeyStyles(options: TestOptions, contextBuilder: ContextBuilder): void {
	const ctx = contextBuilder(options.elementId, 300, 280);
	ctx.scale(3, 3);
	const stave = new Stave(10, 0, 100);
	const note = new StaveNote({ keys: ['g/4', 'bb/4', 'd/5'], duration: 'q' })
	.setStave(stave)
	.addModifier(new Accidental('b'), 1)
	.setKeyStyle(1, { shadowBlur: 2, shadowColor: 'blue', fillStyle: 'blue' });
	new TickContext().addTickable(note).preFormat().setX(25);
	stave.setContext(ctx).draw();
	note.setContext(ctx).draw();
	ok(note.getX() > 0, 'Note has X value');
	ok(note.getYs().length > 0, 'Note has Y values');
	}

[Soren74]

Thank you for the answer Sir - much appreciated!

…

On Fri, Mar 17, 2023 at 2:54 AM Rodrigo Vilar ***@***.***> wrote: You have to use setStyle, example attached https://jsfiddle.net/Lh81o4wg/ — Reply to this email directly, view it on GitHub <#1535 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANXQEK24UPFAZKZ6GHWUTMLW4QDCFANCNFSM6AAAAAAV57726U> . You are receiving this because you authored the thread.Message ID: ***@***.***>