フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Canvasの基本 canvasのコピー

画像のトリミングと同じ方法でcanvasのコピーを行うことができます。drawImageメソッドのソースとして、canvasオブジェクトを渡してあげれば、コピーの対象として扱えるようになります。

以下のサンプルは、canvas_1をcanvas_2にコピーする単純なサンプルです。drawImageメソッドを使用するので、トリミングすることも可能です。

var canvas_1 = document.getElementById('c1');
var canvas_2 = document.getElementById('c2');
var context = canvas_2.getContext('2d');
context.drawImage(canvas_1, 0, 0);