I am trying to copy the contents of one canvas to another.

The source canvas has a webgl context.

The destination canvas has a 2d context.

My code looks like:

destinationContext.drawImage(sourceCanvas, 0, 0);

This works in Firefox and IE, but it does not work in Chrome. Why not?

Thanks!

I am trying to copy the contents of one canvas to another.

The source canvas has a webgl context.

The destination canvas has a 2d context.

My code looks like:

destinationContext.drawImage(sourceCanvas, 0, 0);

This works in Firefox and IE, but it does not work in Chrome. Why not?

Thanks!

• javascript
• html
• canvas
• webgl

• Do you have preserveDrawingBuffer enabled in your context creation parameters ? – LJᛃ Commented Oct 24, 2014 at 0:08
• Yes, I do. It made no difference. – Dave Brown Commented Oct 24, 2014 at 13:18
• 2 Can you post your code somewhere. Either here in SO or JSFiddle or somewhere? – user128511 Commented Oct 25, 2014 at 5:00

1 Answer 1

Here's some working code.

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>

Here's some working code with a delay. If you are not copying the WebGL canvas in the same event that you drew to it then you need one of these solutions. Even though that question is about toDataURL all the same things apply to using a WebGL canvas with 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>