【JavaScript】canvasの値をコピーする方法

Question

配列やオブジェクトを別の変数に代入するにあたって、値の格納場所を参照させるのではなく値そのものをコピーしたい場合はスプレッド構文が有効ですが、canvasの値をコピーしたい場合はどうすればよいのでしょうか？

const canvas = document.getElementById('canvas');//キャンバスを取得
const ctx = canvas.getContext("2d");//コンテクストを取得

let canvasData = canvas;//キャンバスの値を保存

ctx.fillRect(50, 50, 50, 50);//適当にキャンバスをいじる

ctx.drawImage(canvasData, 0, 0, canvas.width, canvas.height);//いじる前のキャンバスをここで描画したい

上記のような動作を実現したいのですが、実際にはいじった後のcanvasが描画されてしまいます。なので変数canvasDataにcanvasの値そのものをコピーし、その後canvasに操作を加えてもcanvasDataには影響が出ないようにしたいです

getImageDataを用いてイメージそのものをコピーすることも考えましたが、それだとdrawImageではなくputImageDataでしか描画できないのでやめました。サイズ変更などが可能なdrawImageでどうにか実現したいです

Answer 1

let canvasData = canvas.cloneNode(true);

で複製したらどうですか？

---

（追記）

わかりました。drawImageできるイメージが欲しいわけですね（質問にそう書いてますね）
canvas要素の複製は不要ですね。
これでどうでしょう。

<canvas id="canvas" width="200" height="200" style="background-color: black;"></canvas>
<canvas id="another-canvas" width="500" height="500" style="background-color: black;"></canvas>

<script>
const canvas = document.getElementById('canvas');

// canvasに適当に描画
const ctx = canvas.getContext('2d');
ctx.fillStyle = "green";
ctx.fillRect(50, 50, 50, 50);

// canvasに描画された内容をPNGデータ化して仮のimg要素に指定
const image = document.createElement("img");
image.src = canvas.toDataURL();

// another-canvasにdrawImage
const anotherCanvas = document.getElementById('another-canvas');
anotherCanvas.getContext('2d').drawImage(image, 0, 0, anotherCanvas.width, anotherCanvas.height);
</script>

Comments

[flandre]

回答ありがとうございます
教えて頂いた通りやってみましたが、特に変化はありませんでした…
自分のやり方が何か間違っているのでしょうか？

↓以下コードです
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.style.background = 'black';

let canvasData = canvas.cloneNode(true);

ctx.fillStyle = "white";
ctx.fillRect(50, 50, 50, 50);

ctx.drawImage(canvasData, 0, 0, canvas.width, canvas.height);

[itagagaki]

やりたいことを私が理解できていない気もするのですが、canvasを複製しておいて、その複製のほうのコンテクストに描画するのではダメなのですか？

const canvas = document.querySelector('canvas');
canvas.style.background = 'black';

let canvasData = canvas.cloneNode(true); // 要素を複製
document.body.appendChild(canvasData); // 複製を可視化してみるため入れました
const ctx = canvasData.getContext('2d'); // 描画先として複製のほうのコンテクストを得る

ctx.fillStyle = "white";
ctx.fillRect(50, 50, 50, 50);

ctx.drawImage(canvasData, 0, 0, canvas.width, canvas.height);

[flandre]

丁寧に対応して下さってありがとうございます
この場合って既に色々描画したあとのキャンバスを複製することってできるんでしょうか？自分のコードだとそれが上手くいかなくて…

後から要件を追加するみたいになってしまって申し訳ないです。コピー(or複製)したいのは描画済みのキャンバスだったのですが、描画済みかどうかが影響を与えることはないと思って言及していませんでした。自分の説明不足です

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.style.background = 'black';

ctx.fillStyle = "white";
ctx.fillRect(50, 50, 50, 50);//複製前に適当に描画

const canvasData = canvas.cloneNode(true);//canvasに行われた描画も複製したいのですが上手くいきません
document.body.appendChild(canvasData);

ctx.drawImage(canvasData, 0, 0, canvas.width, canvas.height);

[itagagaki]

回答に追記しました。

[flandre]

これです！ありがとうございます
キャンバスをpng化するメソッドというのがあるんですね…勉強になりました
色々と親切に回答してくださって本当にありがとうございました