Estoy siguiendo el tutorial WebGL de MDN ( código , demostración (rectángulo negro) ) para crear un lienzo WebGL.

El objetivo es un script de usuario (con sombreadores WebGL, es decir, efectos de video) para YouTube. Así que abrí una página de videos de YouTube y puse el código a continuación (del enlace de arriba) en la consola de JavaScript. Se creó el lienzo, pero es invisible.

El lienzo hereda una gran cantidad de CSS de YouTube de forma predeterminada. ¿Estoy pasando por alto algunas propiedades de CSS que lo hacen invisible? ¿Qué buscar en estos casos? Debería ser negro.

 let container = document.getElementsByClassName( 'video-stream html5-main-video' )[0].parentElement; let canvas = document.createElement('canvas') canvas.setAttribute('id', 'glcanvas') canvas.setAttribute('width', '1000') canvas.setAttribute('height', '1000') container.appendChild(canvas) // Initialize the GL context const gl = canvas.getContext("webgl"); // Set clear color to black, fully opaque gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear the color buffer with specified clear color gl.clear(gl.COLOR_BUFFER_BIT);