How to solve the problem with displaying shaders?

Question

JavaScript

I have a method for creating shader programs. Each program draws an array of points on an event, that is, on click, I add a point to the canvas.
I create the first shader program, an array and a buffer. I set the size and color of points through uniform.
I bind a function that fills the program array to a mouse event (left click). I click on the canvas, everything is OK, a dot of the desired color and size is drawn.
Next, I also create a second program, set the size and color of the dots. I bind the replenishment function to another mouse event (right click).
I click the left key, a point is drawn, but its color and size are the same as in the second program, I click on the RMB, all the points that were drawn in the first shader disappear, and the points that were added to the second shader are displayed.
It turns out that if you add a third shader, the size and point values ​​​​specified for it will replace these values ​​\u200b\u200bof all previous programs.
Why dot size and color values ​​are replaced?
Is it possible to make the shaders show up at the same time?

Answer 1

Bindi shaders to different programs and redraw different arrays switch useProgram()