CODEWITHSUNDEEP
javascripthtmlcanvaswebgl
Zohreh
Zohreh

Reputation: 71

how to copy another canvas's data on the canvas with getContext('webgl')?

I have a canvas for showing medical image and I have another canvas for annotating images by draw shape or line.

when I draw a line on canvas#2 I want to copy drawn line on canvas#1 something like this:

  var context = canvas1.getContext('2d');
  context.drawImage(canvas2,0,0);

but because my canvas#1 has a getContext('webgl') I can't do that.

I mean how to simulate 

  drawImage() for getcontext('webgl')?

I really appreciate any help or advice.

Regards;

Zohreh

Upvotes: 6

Views: 5693

Answers (3)

1j01
1j01

Reputation: 4209

You could use a 2D canvas as the on-screen canvas, and draw the WebGL canvas to it when updating the WebGL canvas before drawing whatever annotations on.

drawWebGLStuff(webGLCtx);

// Copy image data of WebGL canvas to 2D canvas.
// This should be done right after WebGL rendering,
// unless preserveDrawingBuffer: true is passed during WebGL context creation,
// since WebGL will swap buffers by default, leaving no image in the drawing buffer,
// which is what we want to copy.
ctx2D.drawImage(webGLCanvas, 0, 0);

drawAnnotations(ctx2D);

(The annotations could be rendered each frame from a list of shapes or drawn to another offscreen canvas, which is then drawn to the main (on-screen) canvas similar to the WebGL canvas.)

Or you can simply layer the canvases on the page with absolute positioning and z-index:

<div style="position: relative;">
   <canvas id="layer1" width="100" height="100" 
       style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
   <canvas id="layer2" width="100" height="100" 
       style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Upvotes: 1

Michael Klishevich
Michael Klishevich

Reputation: 1864

I had a similar problem with Emscripten, needed to copy WebGL canvas to another empty canvas. I used this code but got empty screen.

var sourceCanvasWebGL = document.getElementById( "canvas" );
var destinationCanvas = document.getElementById( "canvasCopy" );
var destinationCanvasContext = destinationCanvas.getContext('2d');
destinationCanvasContext.drawImage(sourceCanvasWebGL, 0, 0);

After some googling (Saving canvas to image via canvas.toDataURL results in black rectangle) I figured out that because WebGL is using 2 buffers while drawing I am copying the old buffer with empty content.

Problem was solved by setting preserveDrawingBuffer: true in the code used to make WebGL drawing.

sourceCanvasWebGL.getContext("webgl2", { preserveDrawingBuffer: true })

P.S. As an alternative you could make an image copy right after rendering the canvas. If so you do not need preserveDrawingBuffer.

Upvotes: 1

Delta
Delta

Reputation: 4338

Well, you could just use the toDataURL method of the webgl canvas to convert it into an image. Then draw it on the 2d context.

ctx2D.drawImage(webGLCanvas.toDataURL("image/png"), 0, 0);

In this case I believe you might have to set the preserveDrawingBuffer propertie of the webgl canvas to true when initializing it.

...getContext("webgl", {preserveDrawingBuffer: true});

Upvotes: 1

Related Questions