Circle in GLSL is being drawn in the wrong location

Question

So, I have a circle in glsl that is supposed to be drawn around the mouse. The resulting circle is drawn in the wrong location.

I'm drawing the circle by taking the step of the distance from st and the vector2 of the uniform mouse.

I have no Idea why this is happening.

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;
    float pct = 0.0;
    vec2 brightness = vec2(0.0);
    
    pct = step(distance(st,vec2(u_mouse/100.0)),0.5);

    vec3 color = vec3(0.);
    color = vec3(pct);
    
    brightness = vec2(1.0);

    gl_FragColor = vec4(color,brightness);
}

    #ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    st.x *= u_resolution.x/u_resolution.y;
    float pct = 0.0;
    vec2 brightness = vec2(0.0);
    
    pct = step(distance(st,vec2(u_mouse/100.0)),0.5);

    vec3 color = vec3(0.);
    color = vec3(pct);
    
    brightness = vec2(1.0);

    gl_FragColor = vec4(color,brightness);
}

Answer 1

Is the code duplicated by accident? I would check that you are passing in the values you expect for mouse and resolution, and take into account whether your window is fullscreen or not.

Answer 2

Here is an example using Shadertoy, that can be trivially adapted to your OpenGL/GLSL code.

The code comes from a basic 2D tutorial on Shadertoy on how to draw a circle around the centre of the screen, by coloring a pixel based on whether it lies within a given cartesian distance (ie. its radius) from its centre. Then it is modified to instead draw the circle around the mouse pointer:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2  m  = (iMouse.xy / iResolution.xy);
    vec2  uv = (fragCoord.xy / iResolution.xy);
    uv.x *= iResolution.x/iResolution.y;
    m.x *= iResolution.x/iResolution.y;
    float radius = 0.25;
    
    vec3 pixel;
    if( (uv.x-m.x)*(uv.x-m.x) + (uv.y-m.y)*(uv.y-m.y) < radius*radius ) {
        pixel = vec3(0.3, 0.3, 1.0);
    } else {
        pixel = vec3(1.0, 0.3, 0.2);   
    }

    fragColor = vec4(pixel, 1.0);
}

Demo: