Stroke will render at different widths depending on size of editor

[rjmccluskey]

Background

I'd like to implement "save and restore state" with marker.js however I'm having difficulty with stroke width. If I'm using popup mode and have a large screen, my image will be displayed fairly large in the editor but the stroke width does not scale. This means that the rendered stroke will look thinner than if I had opened the editor on a smaller viewport.

So imagine one user on a small screen selects a stroke width they like. Another user on a large screen comes back to edit the markers, keep the same stroke width option, but ends up rendering markers that now look thinner.

Hopefully I'm making sense. Basically the stroke width is constant in the editor but the image may be smaller or larger in the editor depending on the screen size. This means the same stroke width option will render thicker (relative to the image) on smaller screens and thinner on larger screens.

Here's a video showing the behavior:

https://github.com/user-attachments/assets/a4bab963-e925-4195-9ebe-763146180916

Additional Info

markerjs2 v2.32.1

The above video was made using the codesandbox for this demo but with a couple edits:

markerArea.renderAtNaturalSize = true;
markerArea.settings.displayMode = "popup";

[ailon]

Yes, you are making sense. and this is an unfortunate behavior. Having said that, I don't see a way to address it reliably so, for example, opening on a smaller screen doesn't result in an invisibly thin lines, etc.

Ultimately, marker.js is not a graphics editor and it doesn't aim to be pixel perfect.

[rjmccluskey]

Makes sense. We ended up calculating stroke width on our end and setting the width on the MarkerArea. We also have to adjust the stroke widths of any saved state before restoring state. It ended up working good enough. Thanks for responding!