[SVG Plugin]: SVG exporting does not carry over path specific stokeStyles

[Zettersten]

@luileito thanks for a great plugin. Super easy to use.

I have the following code in the mousedownBefore event.

mousedownBefore: function (elem, data, evt) {
    var brushType = getBrushType();
    if (brushType == 'eraser') {
        // There is a method to set the brush in eraser mode.
        data.options.graphics.lineWidth = 20;
        data.sketch.eraser();
    } else if (brushType == 'pencil') {

        const color = getBrushColor() ?? "black";

        // There is a method to get the default mode (pencil) back.
        data.options.graphics.lineWidth = 2;
        data.options.graphics.strokeStyle = color;

        data.sketch.saveGraphics(data.options.graphics);
        data.sketch.pencil();
    }
}

The function named getBrushColor is similar to your getBrushType function. It returns a HEX color of the color selected on the page.

Example UI:

However, when I execute the "svg.create" method the contents returned only use black.

Am I doing something wrong? Is this supported?

[Zettersten]

I ended up writing:

function changeGraphics(data, graphicOptions) {
    const options = {
        fillStyle: graphicOptions.fillStyle || '#F00',
        strokeStyle: graphicOptions.strokeStyle || '#F0F',
        lineWidth: graphicOptions.lineWidth || 2,
        lineCap: graphicOptions.lineCap || 'round',
        lineJoin: graphicOptions.lineJoin || 'round',
        miterLimit: graphicOptions.miterLimit || 10,
    };
    for (const opt in options) {
        const val = options[opt];
        data.sketch.callStack.push({ property: opt, value: val });
    }
}

Which seems to be working.

The whole thing:

mousedownBefore: function (elem, data, evt) {
    var brushType = getBrushType();
    if (brushType == 'eraser') {
        // There is a method to set the brush in eraser mode.
        data.options.graphics.lineWidth = 20;
        data.sketch.eraser();
    } else if (brushType == 'pencil') {

        const color = getBrushColor() ?? "black";

        // There is a method to get the default mode (pencil) back.
        data.options.graphics.lineWidth = 2;
        data.options.graphics.strokeStyle = color;

        changeGraphics(data, data.options.graphics);
        data.sketch.pencil();
    }
}

[luileito]

Hi, thanks for reporting. I believe you can use saveGraphics(obj) followed by restoreGraphics(). For instance:

var brush = new jSketch('yourCanvas');
brush.saveGraphics({strokeStyle:'lime'}).restoreGraphics();