title: Fragment shader position changes when browser zoomed
body: <p>I am using cocos2d-js webgl mode to create a very simple shader effect:</p>
  
  <p>draw a filled circle with a give center position and a radius.</p>
  
  <p>The fragment shader :</p>
  
  <pre><code>uniform vec2 position;
  uniform vec3 lightColor;
  uniform float lightSize;
  
      void main()
      {
          float distance = distance(gl_FragCoord.xy, position);
          if (distance &lt;= lightSize) {
              gl_FragColor = vec4(lightColor, 1.0);
          }
          else {
              gl_FragColor = vec4(lightColor, 0.0);   
          }
      }
  </code></pre>
  
  <p>This code works fine when the browser is not scaled (100 %).</p>
  
  <p>But, when I try to zoom the browser to 80% or 120%, I found that the circle was drawn with a offset from the center position I set.</p>
  
  <p>I am not sure how to fix this problem to make sure that the circle is always on the CENTER POSITION I set no matter how I zoom the browser.</p>
  
  <p>Any advice will be appreciated, thanks :)</p>