weird vTextureCoord on fragment shader

[GBear]

hi. 

i write following filter shader code 
 

function createShaderShadow(width, height) {    // smoke shader    var uniforms = {};    uniforms.resolution = {        type: '2f',        value: {            x: width,            y: height        }    };    uniforms.time = {type: '1f', value: 0.5};    uniforms.dimensions = {type: '4fv', value:new PIXI.Float32Array([0, 0, 0, 0])};    uniforms.target= {type: '4fv', value:new PIXI.Float32Array([200, 200, 200, 200])};    var fragmentSrc = [        'precision mediump float;',        'uniform sampler2D uSampler;',        'varying vec2 vTextureCoord;',        'uniform vec4 dimensions;',        'uniform vec2 resolution;',        'uniform vec4 target;',        'void main() {',        '    vec2 ratio = vTextureCoord.xy * resolution.xy;',        //'    vec2 ratio = vTextureCoord.xy;',        '    vec2 p = vec2(200, 200);',        '    float dist = distance(ratio, p);',        '    vec4 color = texture2D(uSampler, vTextureCoord);',        '    if(dist < 150.0){',        '        gl_FragColor = color;',        //'        gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);',        '    } else {',        '        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);',        '    }' ,        '   return;',        '}'    ];    var coolFilter = new PIXI.AbstractFilter(fragmentSrc, uniforms);    return coolFilter;};

green part is target to draw texture.

 

but i set texture color into gl_FragColor , i can see weird image like under 

 

what is wrong there? and what can i do to resolve this?

 

 

this. is normal image 

 

thx ^^/

[xerver]

Try not multiplying by the resolution uniform you have.

 

Also, posting a running example on jsfiddle, or codepen or similar is much more helpful so I can mess with values instead of having to setup a project of my own.