Окончательная композиция WebGlrenderingContext и CanvasRenderingContext2d внутри окна браузера ⇐ Javascript

[Anonymous]

У меня есть два прозрачных , обычный 2D и webgl, и оба заполнены одним и тем же полупрозрачным цветом, например, 0x0000ff80 .
Теперь то, что, наконец, композируется в окне браузера, выглядит иначе, скорее всего, потому что Canvas Webgl используется, в то время как обычный холст прямой альфа.
< /p>

Код: Выделить всё

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0,0,127,0.5)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
document.body.appendChild(canvas);

canvas = document.createElement("canvas");
ctx = canvas.getContext("webgl");
ctx.clearColor(0, 0, 0.5, 0.5);
ctx.clear(ctx.COLOR_BUFFER_BIT);
document.body.appendChild(canvas);

, хотя мне нужно, чтобы обычный холст был составлен, как Canvas Webgl. Hard-Light < /strong>, прежде чем рисовать мое фактическое содержание.
e.g.

Код: Выделить всё

let canvas = document.createElement("canvas");
ctx = canvas.getContext("webgl");
ctx.clearColor(0, 0, 0.5, 0.5);
ctx.clear(ctx.COLOR_BUFFER_BIT);
document.body.appendChild(canvas);

canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255,255,255,1)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = "hard-light"
ctx.fillStyle = "rgba(0,0,127,0.5)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
document.body.appendChild(canvas);

Но, как я уже сказал>

Подробнее здесь: https://stackoverflow.com/questions/795 ... d-inside-t