javascript - 添加到 YouTube 的 Canvas 不可见

Question

我关注 the WebGL tutorial from MDN ( code , demo (black rectangle) ) 创建一个 WebGL Canvas 。
目标是 YouTube 的用户脚本(带有 WebGL 着色器，即视频效果)。所以我打开了一个 YouTube 视频页面并将下面的代码(来自上面的链接)放入 JavaScript 控制台。 Canvas 已创建，但它是不可见的。
默认情况下， Canvas 从 YouTube 继承了很多 CSS。我是否忽略了一些使其不可见的 CSS 属性？在这种情况下要注意什么？它应该是黑色的。

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

Answer 1

你的 Canvas 在那里，但它不在顶部。设置一些额外的 CSS 用于定位。例如:

position: fixed;
z-index: 1000;