Canvas 添加到 YouTube 不可见

Question

我正在关注 the WebGL tutorial from MDN (code, demo (black rectangle)) 创建 WebGL canvas。

目标是 YouTube 的用户脚本（带有 WebGL 着色器，即视频效果）。所以我打开了一个 YouTube 视频页面并将下面的代码（来自上面的 link）放入 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;

Canvas 添加到 YouTube 不可见

Canvas added to YouTube is not visible

javascript

css

canvas

youtube

webgl