SVG render context does not honor stroke style

[jaredjj3]

I'm using RenderContext as a convenient way to render shapes on top of a vexflow music sheet. I'm drawing rectangles like this:

ctx.save();
ctx.setStrokeStyle(strokeStyle);
ctx.rect(x, y, w, h);
ctx.stroke();
ctx.restore();

When I draw with SVGContext, the stroke style is always black. When I draw with CanvasContext, the stroke style is correct. FWIW, SVGContext.arc seems to work correctly (which is evident by the red circles).

SVG

Canvas

[AaronDavidNewman]

This looks like an issue specifically with rect in svgcontext. Unlike line and path, svgcontext.rect is a single call - it doesn't build a path and then call stroke to close if off (even though all 3 shapes end up in a single svg element). There is a way to pass the line attributes into rect specifically, but no way to call it on the rendercontext interface.

It would be pretty simple to change svgcontext.rect to do something like:

  rect(x: number, y: number, width: number, height: number, attributes?: Attributes): this {
   // ...
    attributes = attributes ?? { fill: 'none', 'stroke-width': this.lineWidth };  // don't assign stroke here
    attributes.stroke = (typeof(attributes.stroke) === 'undefined' && typeof(this.attributes.stroke) === 'string') ?
        this.attributes.stroke : 'black';

That shouldn't break anything, unless existing apps are used to leave the 'stroke' value as something strange, and then use rect.