Can't change <canvas> background color with WebGL, OGL and GLSL Shaders

65 views Asked by At

I have been scratching my head with this tutorial demo I'm trying to learn: https://tympanus.net/codrops/2021/01/05/creating-an-infinite-auto-scrolling-gallery-using-webgl-with-ogl-and-glsl-shaders/

As you can see in Demo 1: https://codrops.com/Tutorials/InfiniteAutoScrollingGallery/

You can easily change the HTML background by changing the CSS property or you can add a "Background: color" to the tag which also updates it.

But in the Demo 2: https://codrops.com/Tutorials/InfiniteAutoScrollingGallery/index2.html for some reason, you can't?

I checked and I believe this is down to how the canvas has been set with background property pre-defined with the Vecs and it's not transparent, can anyone help to fix this? Or is there even a workaround to modify the canvas background colour in-line?

I believe this post snippet is the culprit as it's not in Demo 1:

precision highp float;

uniform sampler2D tMap;

uniform vec2 uResolution;
uniform float uStrength;

varying vec2 vUv;

void main() {
  vec3 color;

  color.r = texture2D(tMap, vec2(vUv.x + uStrength, vUv.y)).r;
  color.g = texture2D(tMap, vUv).g;
  color.b = texture2D(tMap, vec2(vUv.x - uStrength, vUv.y)).b;

  gl_FragColor = vec4(color, 1.0);
}
0

There are 0 answers