Canvas background color in saved image

[kkjeer]

When the render type is set to "canvas", the user can right-click the canvas to save the image. However, the saved image has a transparent/gray background:

A white background would match the expectation of sheet music. In the browser, this can be achieved by setting background: white on the container, but the saved canvas image doesn't have the white background.

Is there a way to specify the background color of the canvas so that it gets saved into the resulting image?

[sschmidTU]

Good catch, thanks for making the issue!
There should be a setting for this in Vexflow, i'm already looking at it, should be pretty easy to fix.

[sschmidTU]

It seems to be more difficult than i thought. We should be able to simply set the background fill color in CanvasVexFlowBackend.initialize() as in this demo from the Vexflow Tutorial:
this.ctx.setBackgroundFillStyle("#eed");
or
(this.canvasRenderingCtx as any).setBackgroundFillStyle("#eed");

But somehow we still get a transparent background with this.

It should be noted that VexFlow prefers SVGContext, and the CanvasContext is much less developed.

@kkjeer For now, you can save the canvas image and set the background to white in an image editor.
Or just take a screenshot. (though you'll lose some quality)

[kkjeer]

@sschmidTU thanks for looking into this! Can the canvas draw a full screen white rectangle underneath the music? I tried a workaround that:

1. Creates a second canvas
2. Draws the contents of the music canvas onto the second canvas
3. Clears the music canvas
4. Draws a white rectangle onto the music canvas
5. Draws the contents of the second canvas onto the music canvas

This did set the image background to white; however, it also resulted in some odd sizing issues:

[sschmidTU]

@kkjeer thanks for experimenting with this as well!

I also tried drawing a white rectangle before the music is drawn, but found the color settings in vexflow and OSMD a bit convoluted. And drawing a white rectangle after clear() didn't do anything for me.

The sizing/placement of the title in your image is interesting. I have a hunch that somewhere in the calculation, the bounding box or position of your white rectangle caused this. Or maybe you changed some other code. Would be interesting to narrow down the cause of that to a line of code, but maybe not worth it for this experimental code.

[sschmidTU]

@kkjeer I experimented a little more, and it seems like there's a bug in Vexflow, CanvasContext can't draw non-transparent rectangles.

I created an issue at Vexflow for Canvas rectangles.

For SVG Rendering, drawing a colored rectangle as background works already. Here's a brown one to illustrate, of course it should be white in the end.

If you want to test this in OSMD, look at the fix/transparentToWhiteBackground branch.
But for now i think we would need a fix in Vexflow for this issue,

An alternative would be to use SVG and save the content of the HTML element containing the SVG as an image, which we would need to do in javascript in the demo. We could add a button to download the image. It shouldn't be difficult, though it won't be as convenient as right-clicking the canvas image and copying or saving it.

@kkjeer by the way, what are you using OSMD for? I'm curious.

[kkjeer]

@sschmidTU thanks again for your help. I'll look into using SVG rendering instead.

I'm using OSMD in a React application for previewing music XML files.

[sschmidTU]

@kkjeer i got background color working for canvas now, just opened a pull request for it (#318), so it will be in the develop branch soon.
It's really convenient to be able to capture the whole score by right-click with the canvas backend.

[sschmidTU]

This is possible now:

osmd.setOptions({pageBackgroundColor: '#FFFFFF'})

Just be aware that you won't see the cursor if you set a backgroundColor.

See PR#318 which at the current state does show the cursor,
but the notes don't completely paint over the cursor anymore (they look transparent),
so it's a compromise.
But the cursor won't appear on saved images anyways, because it's drawn on a different canvas.