I wish to draw a simple mouse trail using fragment shaders, similar in appearance to drawing the following in processing (omitting the step of clearing the canvas). I cannot wrap my head around the setup necessary to achieve this.

// processing reference using cursor as paintbrush
void setup () {
  size(400, 400);
  background(255);
  fill(0);
}

void draw () {
  ellipse(mouseX, mouseY, 20, 20);
}

Here's my vain approach, based on this shadertoy example:

1. I draw a simple shape at cursor position

void main(void) {
    float pct = 0.0;
    pct = distance(inData.v_texcoord.xy, vec2(mouse.x, 1.-mouse.y)) * SIZE;
    pct = 1.0 - pct - BRIGHTNESS;
    vec3 blob = vec3(pct);
 
    fragColor = vec4( blob, 1.0 );
}

2. Then my confusion begins. My thinking goes that I'd need to mix the output above with a texture containing my previous pass. This creates at least a solid trail, albeit copying the previous pass only within a set distance from the mouse position.

#shader pass 1
void main(void) {
    float pct = 0.0;
    pct = distance(inData.v_texcoord.xy, vec2(mouse.x, 1.-mouse.y)) * SIZE;
    pct = 1.0 - pct - BRIGHTNESS;
    vec3 blob = vec3(pct);
    
    vec3 stack = texture(prevPass, inData.v_texcoord.xy).xyz;
    
    fragColor = vec4( blob*.1 + (stack*2.), 1.0 );
}

#shader pass 2
void main(void) {
    fragColor = texture(prevPass,inData.v_texcoord);
}

I would be grateful if someone could point me towards where my code and thinking becomes faulty, or point me towards some resources.

I wish to draw a simple mouse trail using fragment shaders, similar in appearance to drawing the following in processing (omitting the step of clearing the canvas). I cannot wrap my head around the setup necessary to achieve this.

// processing reference using cursor as paintbrush
void setup () {
  size(400, 400);
  background(255);
  fill(0);
}

void draw () {
  ellipse(mouseX, mouseY, 20, 20);
}

Here's my vain approach, based on this shadertoy example:

1. I draw a simple shape at cursor position

void main(void) {
    float pct = 0.0;
    pct = distance(inData.v_texcoord.xy, vec2(mouse.x, 1.-mouse.y)) * SIZE;
    pct = 1.0 - pct - BRIGHTNESS;
    vec3 blob = vec3(pct);
 
    fragColor = vec4( blob, 1.0 );
}

2. Then my confusion begins. My thinking goes that I'd need to mix the output above with a texture containing my previous pass. This creates at least a solid trail, albeit copying the previous pass only within a set distance from the mouse position.

#shader pass 1
void main(void) {
    float pct = 0.0;
    pct = distance(inData.v_texcoord.xy, vec2(mouse.x, 1.-mouse.y)) * SIZE;
    pct = 1.0 - pct - BRIGHTNESS;
    vec3 blob = vec3(pct);
    
    vec3 stack = texture(prevPass, inData.v_texcoord.xy).xyz;
    
    fragColor = vec4( blob*.1 + (stack*2.), 1.0 );
}

#shader pass 2
void main(void) {
    fragColor = texture(prevPass,inData.v_texcoord);
}

Frankly, I'm a little bit in the blue about how to draw without data and "stack" previous draw calls in webgl, and I'm having a hard time finding beginner documentation.

I would be grateful if someone could point me towards where my code and thinking becomes faulty, or point me towards some resources.