Передача холста webgl в CanvasRenderingContext2D.drawImage()

Question

Я пытаюсь скопировать содержимое одного полотна на другое.

Исходный холст имеет контекст webgl.

Целевой холст имеет двухмерный контекст.

Мой код выглядит так:

destinationContext.drawImage(sourceCanvas, 0, 0);

Это работает в Firefox и IE, но не работает в Chrome. Почему бы и нет?

Спасибо!

Answer 1

Вот некоторый рабочий код.

const gl = document.querySelector("#a").getContext("webgl");
const ctx = document.querySelector("#b").getContext("2d");

// put a rectangle in the webgl canvas
gl.enable(gl.SCISSOR_TEST);
gl.scissor(10,20,100,50);
gl.clearColor(0,0,1,1);
gl.clear(gl.COLOR_BUFFER_BIT);

// copy the webgl canvas to the 2d canvas
ctx.drawImage(gl.canvas, 0, 0);

canvas {
  border: 1px solid black;
  margin: 5px;
}

<canvas id="a" width="200" height="100"></canvas>
<canvas id="b" width="200" height="100"></canvas>

Вот некоторый рабочий код с задержкой. Если вы не копируете холст WebGL в том же событии, которое нарисовали на нем, вам нужно одно из этих решений. Хотя этот вопрос о toDataURL все то же самое относится к использованию холста WebGL с drawImage,

const gl = document.querySelector("#a").getContext("webgl", {
  preserveDrawingBuffer: true,
});
const ctx = document.querySelector("#b").getContext("2d");

// put a rectangle in the webgl canvas
gl.enable(gl.SCISSOR_TEST);
gl.scissor(10,20,100,50);
gl.clearColor(0,0,1,1);
gl.clear(gl.COLOR_BUFFER_BIT);

// copy the webgl canvas to the 2d canvas 1 second later
setTimeout(copy, 1000);

function copy() {
  ctx.drawImage(gl.canvas, 0, 0);
}

canvas {
  border: 1px solid black;
  margin: 5px;
}

<canvas id="a" width="200" height="100"></canvas>
<canvas id="b" width="200" height="100"></canvas>