I created a shader on the canvas, obtained the canvas itself from Phaser using ‘const canvas = game.canvas’ and ‘const gl = canvas.getContext(“webgl”)’. At the end of the script for displaying the shader, I have ‘gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)’ (i.e., drawing a rectangle). When I call the entire function within Phaser, the shader is not displayed there. I found the reason in clearing the background on each frame due to the ‘clearBeforeRender: true’ parameter. Since my shader is not an object on the canvas, it gets cleared.
How can I work around this while still using the shader written on the canvas? Updating the shader on every frame is not suitable as it would be performance-intensive.
Let’s take a simple shader as an example that changes the entire canvas to green. It should be on top of all images, meaning it changes the pixels on all images to green.