Hi guys.
I inserted a webplayer into a resizable container. if I view as a user it is very blurry.
if I open chrome dev tools it becomes sharp and well antialiased on any resolution.
How can I keep it sharp for normal view as well?
a player is in VUE component.
The issue you're experiencing with the Spine web player appearing blurry in normal view but sharp when using Chrome DevTools could be related to how the player is being rendered or scaled within your Vue component. One potential solution is to ensure that the player is being rendered at the correct resolution and that any scaling is handled properly. You might want to check the settings related to the viewport and ensure that the player is not being scaled in a way that causes blurriness. Additionally, you can look into the settings for pixel art in Spine's settings, such as setting Smoothing to 0, which might help if your assets are pixel-based. You can find more information on configuring the viewport here: Spine Player Viewports.
Still need help with that one. Why is dev tools view rendered good than?
How can I retain settings I get in dev tools in a normal view without any dances with configs?
maybe there is some canvas settings
For some reason spine webplayer increases canvas width and height in dev tools view.
Is there a way I can increase it in regular view as well?
I haven't seen this happen. Can you link a page showing it? When you open the dev tools, the browser width changes. It might be your CSS affecting the canvas size.
Here, you can find the code that determines the canvas's width and height attributes (not the CSS style). These attributes define the actual "space" within the canvas.
As you can see, the calculation involves window.devicePixelRatio (dpr) and the actual <canvas> width and height in pixels (not the HTML attributes), as reported by canvas.clientWidth and canvas.clientHeight.
The dpr depends on your device—HiDPI displays and smartphones usually have a dpr of 2 or 3.
Try printing these values and compare them when Chrome DevTools is open versus closed. From your screenshot, it seems that the canvas attribute width and height are almost doubled when DevTools is open. This might indicate that either clientWidth and clientHeight have doubled or that dpr has increased.
As Nate said, sharing your code would be the most effective way for us to help you! 
I could share the page, but its nsfw. Does forum has a private share with admins only functionality?
Basically what I have is an instagram like feed, which has max-width:768px, on desktop as I develop it has same width both with and without dev tools enabled.
Also I can set my screen size in dev tools enabled.
You mentioned the code that calculates it, but is there a way to manipulate it? So I can force double dpi on my wish?
AlsoI partially managed to. Solve the bluriness with adjusted container. Container was 766px width because of borders and interpolation was happening with width sometimes getting extra 1 pixel, while height getting 1pixel less during downscaling or upscaling. So adjusting container to be 768px width gave me a better interpolation results on both downscaling and upscaling.
However i still wonder how to force double dpi?
You can send the link at contact@esotericsoftware.com.
The player already manages the dpi correctly. There's no need to provide to it a different value to the one returned by the browser.
I just wanted you to check what values were used to determine the source of the width/height difference.
Thanks for sharing it. I don't see any difference with or without chrome dev tools.
It has to be something on your side. Have you tried to open your app in ingognito or with a different browser/device?
Are you talking about visual difference? Or about width height doubling in dev tools?
Doesnt width height of canvas double for you when in dev tools mode?
I'm talking about visual difference, yes.
How can I determine the width and height attributes of the canvas without opening the dev tools? 
Davide ah, i think I gave a wrong explanation. In dev tools canvas width differs if you click the "resolution"? button.
As in my first two screenshots, but I didnt explain that the difference was with and without click on.
Im not sure if named it correctly, i mean small button that turns blue when you click it and it allows you to adjust resolution.
Do you mean this button? 
Maybe you are emulating a device with higher dpr.
If you want to change how the width and height attributes are calculated, you need to make a fork and modify the formula linked above.
I don't recommend that though. That calculation already optimizes how texture should be displayed for the current device.
yes, that button.
even without emulating specific device, chrome seems to double DPI when you use it:
That's why I asked if you could maybe implement an additional config property, that would allow manually adjust dpi. and get a sharper image.
Here is the screenshots from paused animations at 1201px screen width (without that button clicked)
and 1201px screen width with double dpi (after button is clicked):
Apparently, clicking that button forces window.devicePixelRatio to be set to 2, as mobile browsers typically do.
You can test it writing devicePixelRatio in the dev tools console.
I couldn’t reproduce the issue on your website. Tomorrow, I'll fetch your assets locally so I can better control the scene and visualize the problem you're describing. It might be related to min/mag filters and mipmaps.
In any case, there's not much we can do. We won’t force the canvas to use a higher DPI than what the browser returns. If you want to enforce a different width/height for the canvas attributes, you’ll need to modify the code as suggested above.
