title: GLSL Rounded Rectangle Corners Are Stretched
body: <p>I'm programing a GUI library in openGL and decided to add rounded corners because I feel like it gives a much more professional look to the units.
  I've implemented the common</p>
  
  <pre><code>length(max(abs(p) - b, 0.0)) - radius
  </code></pre>
  
  <p>method and it almost works perfectly except for the fact tat the corners seems as though they are stretched:</p>
  
  <p><a href="https://i.stack.imgur.com/yjbhz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yjbhz.png" alt="enter image description here"></a></p>
  
  <p>My fragment shader:</p>
  
  <pre><code>in vec2 passTexCoords;
  
  uniform vec4 color;
  uniform int width;
  uniform int height;
  uniform int radius;    
  
  void main() {
      fragment = color;
  
      vec2 pos = (abs(passTexCoords - 0.5) + 0.5) * vec2(width, height);
  
      float alpha = 1.0 - clamp(length(max(pos - (vec2(width, height) - radius), 0.0)) - radius, 0.0, 1.0);
  
      fragment.a = alpha;
  }
  </code></pre>
  
  <p>The stretching does make sense to me but when I replace with</p>
  
  <pre><code>vec2 pos = (abs(passTexCoords - 0.5) + 0.5) * vec2(width, height) * vec2(scaleX, scaleY);
  </code></pre>
  
  <p>and</p>
  
  <pre><code>float alpha = 1.0 - clamp(length(max(pos - (vec2(width, height) * vec2(scaleX, scaleY) - radius), 0.0)) - radius, 0.0, 1.0);
  </code></pre>
  
  <p>(where scaleX and scaleY are scalars between 0.0 and 1.0 that represent the width and height of the rectangle relative to the screen) the rectangle almost completely disappears:</p>
  
  <p><a href="https://i.stack.imgur.com/7k8Yg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7k8Yg.png" alt="enter image description here"></a></p>