canvasの結合をしたいが、contextの複製ができない

Question

複数のcanvasの結合をしたいと考えています。canvas2にmycanvasとcanvasを結合します。

<canvas id="mycanvas" style="position: absolute; z-index: -2;"></canvas>
    
<canvas id="canvas"></canvas>

<button onclick="test">TEST</button>
<canvas id="canvas2" width="600" height="400"></canvas>

dataURLでコンテキストの現状態を取得できるとわかったので、まずは
「canvasの複製をcanvas2に作ろう」
としていますがうまくいきません。デベロッパツールでエラーはなし。

var canvas  = document.getElementById('canvas');
var context = canvas.getContext('2d');

function test(){
        var image= new Image
        image.src= context.toDataURL()
        
        var canvas2  = document.getElementById('canvas2');
        var context2 = canvas2.getContext('2d');

        context2.drawImage(new Image, 0, 0);
    }

どこが間違いかご指摘いただけるとありがたいです。

Answer 1

以下のスレッドの回答の応用でできると思います。

CanvasにdrawImageで描写した画像をtoDataURLで取得したい
https://teratail.com/questions/207736