shaderのresolutionがずれてしまう

前提

shaderにセットしたresolutionがなぜか二倍だけずれてしまう。
ブラウザによって、縦横半分の領域しか表示されない。

実現したいこと

ブラウザによらず、全体が表示されるようにしたい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

javascript
1let vs = `
2  precision highp float;
3
4  attribute vec3 aPosition;
5
6  void main() {
7     vec4 positionVec4 = vec4(aPosition, 1.0);
8
9     gl_Position = positionVec4;
10}
11`;
12
13let fs = `
14  precision highp float;
15
16  uniform vec2 resolution;
17	uniform vec2 mouse;
18
19  void main() {
20    float r = 0.0;
21    float g = fract((pow((gl_FragCoord.x-resolution.x)/100.0,2.0)-pow((gl_FragCoord.y-resolution.y)/100.0,2.0))*0.2);
22    float b = 0.0;
23
24    gl_FragColor = vec4(r, g, b, 1.0);
25}
26`;
27
28let theShader;
29
30function setup() {
31   createCanvas(500, 500, WEBGL);
32
33   theShader = createShader(vs, fs);
34   noStroke();
35
36
37}
38
39function draw(){
40  shader(theShader);
41   theShader.setUniform('resolution', [width, height]);
42		theShader.setUniform('mouse', [mouseX, mouseY]);
43  quad(-1, -1, -1, 1, 1, 1, 1, -1);
44  resetShader();
45
46
47}