how to copy another canvas data on the canvas with

Question

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 beacuase my canvas#1 has a getcontext('webgl') i cant do that.

I mean how to simulate

  drawImage() for getcontext('webgl')?

I really appreciate any help or advice.

Regards;

Zohreh

Answer 1

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});

Answer 2

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.

ctx2D.drawImage(webGLCanvas, 0, 0);
// ctx2D.beginPath()...

Or could 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>