Should we make "Scale to fit" more intuitive?

[lucasdinonolte]

This is really more of a question and not a feature request. I stumbled across some "odd" behavior with the "Scale to fit" functionality – which isn't too odd if you think about the implementation of it, but I wanted to double check that this is intended behavior.

Context

When working on a Mechanic Prototype I found myself setting values for my sizes and border widths and so on by eye, based on what I saw in the preview. However when exporting at a larger size everything looked thinner and smaller because I had worked with absolute values (e.g. 300px width looked fine in scaled preview, but were too small in the non-scaled export).

From what I understand "Scale to fit" works with the width and height inputs directly and scales them. I understand the decision to it this way to be motivated by not only fitting the preview within the viewport but also keeping rendering performant for complex sketches by rendering them at a smaller size in preview.

It's obviously simple to work around this, by making all your widths and weights fractions of the canvas' width or height. I ended up defining my width not as 300px but as width * 0.25. I'm not saying this is not intuitive, but I think the above described behaviour can be a bit confusing to newer users.

Possible changes

• We rework scale to fit to be a preview feature only using CSS scale
  • so we always render at full resolution
  • we use CSS to scale the canvas into the viewport
  • this has the downside of always rendering at full resolution (might have performance impact)
• We make the behaviour of "Scale to fit" more explicit
  • the docs could contain a hint on this
  • the docs could also explain that it's a good idea to define your sizes in relation to canvas size anyways
  • additionally we could provide a helper function that you can use to scale your values? So you'd call it with the size you want at full size and it scales that value according to the current scale factor?