I'm following the WebGL tutorial from MDN (code, demo (black rectangle)) to create a WebGL canvas.

The goal is a userscript (with WebGL shaders, i.e. video effects) for YouTube. So I opened a YouTube video page and put the code below (from the link above) into the JavaScript console. The canvas got created, but it is invisible.

The canvas inherits a lot of CSS from YouTube by default. Am I overlooking some CSS properties that make it invisible? What to look out for in such cases? It should be black.

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);