Geek Answers Handbook

How to copy other canvas data to canvas using getContex ('webgl')?

I have a canvas for showing a medical image, and I have another canvas for annotating images with a figure or line.

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

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

but beacuase my canvas # 1 has getcontext ('webgl'), I cannot do this.

I mean how to imitate

  drawImage() for getcontext('webgl')?

I really appreciate any help or advice.

Hello;

Zohre

+4
source share
2 answers

Well, you can simply use the toDataURLwebgl canvas method to convert it to an image. Then draw it in the context of 2d.

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

, , preserveDrawingBuffer webgl true .

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

2D- WebGL WebGL , .

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

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>
+1

More articles:


All Articles