複数のcanvasのtoDataURLを用いた結合が1回のトリガーで反応しない

Question

2枚のcanvasを結合したいと思っています。
ボタン押下をトリガーに一応動きましたが、ダブルクリックのような動作でしか動かず、しかも1枚のcanvasは2重に描画されているような感じです。
※idの数字が順不同でわかりにくいと思いますがご容赦ください。

    <div id="canvasPare">
        <canvas id="mycanvas"></canvas>
        <canvas id="mycanvas2"></canvas>
    </div>
　　<canvas id="mycanvas3"></canvas>
   <button id="ketugou" onclick="ketugou()">テスト</button>

<!-- script抜粋 -->
　　<script>
    var canvas2 = document.getElementById("mycanvas2");
var ctx2 = canvas2.getContext("2d");
canvas2.style.top = "0px";
canvas2.width = width-15;
canvas2.height = height/2 +10;
canvas2.style.zIndex="-1";
ctx2.fillStyle = "rgba(" + [245,236,137, 0.9] + ")";
ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
　　</script>

つまりmycanvas2に半透明な背景を描き、mycanvasにタッチやマウスで自由に何かを描画する。その2枚を結合しmycanvas3に再描写という流れです。

ダブルクリックをすると確かに結合されたような形になりますが背景色が強く、2枚重なっているのでは？という感じです。

function ketugou(){
            const canvasImg = document.getElementById("mycanvas");
            const imgdata = canvasImg.toDataURL();
            const canvasImg2 = document.getElementById("mycanvas2");
            const imgdata2 = canvasImg2.toDataURL();
            const canvas3 = document.getElementById("mycanvas3");
            const ctx3 = canvas3.getContext("2d");
            const image2= new Image;
            image2.src=imgdata2;
            ctx3.drawImage(image2,0,0, canvas3.width, canvas3.height);
            const image= new Image;
            image.src=imgdata;
            ctx3.drawImage(image,0,0, canvas3.width, canvas3.height);
        }

分かりにく質問で申し訳ありませんがどなたかご教示いただけないでしょうか。

Comments

[hoshi-takanori]

コードが断片的でよく分からないのと、canvas 1, 2 に何を描画して canvas 3 はどうなって欲しくて実際はどうなるのかをスクショかなんかで貼ってもらえると助かります。