html5のcanvasを重ねあわせて，いろいろ遊ぶ

html5のcanvasがなかなか面白い．
お絵かき的な使い方がメインにはなるのだけれど，ほとんどすべてjsでいじくり倒せるので，とても面白い．

そんなcanvasを重ねてみた．
いわゆる，レイヤー的な使い方ができるので，おすすめです．

ちなみに，レイヤー用canvasの生成もjs内で行います．
そしてそこに画像を描画していく！（描画するものはなんでもいいです）．

$("#figure").click( function(){
  var $img_canvas = addCanvas(100,100);
  var img_ctx = $img_canvas[0].getContext('2d');
  var img = new Image();
  img.src = "filename.png";
  img.onload = function(){
    img_ctx.drawImage(img, 0, 0, 100, 100);
  }
});

function addCanvas(width, height){
  var id = "canvas" + Math.round(Math.random() * 10000).toString();
  $("#figure").append(
    $('<canvas></canvas>')
      .addClass("cv")
      .attr('id', id)
      .attr('width', width)
      .attr('height', height)
  );
  var canvas = $("#"+ id);
  if (!canvas || !canvas[0].getContext){
    return null;
  }
  return canvas;
}

なんかidはつけてもつけなくてもいいのですが，適当にランダム変数当ててみました．

【未解決】

ソース内のaddCanvas関数なのですが，addCanvas関数の動作をイベント内で直接実装したところ，上手く画像が描画されませんでした．

画像の描画関連も，ロード終了を待ってからにしていますが，canvas関連もappendが終わる前に走っている可能性もあります．
とりあえず，関数実行にしたところ，正常に動作しました．

原因がわかりません．

【注意】

canvasは今のところ親子構造を持てません．

つまり

<canvas id="parent">
 <canvas id="children"></canvas>
</canvas>

ということはできません．

なので，重ね合わせるために，cssのpositionプロパティを使いたい場合は，親divを発行します．

div{
 position: relative;
}

canvas{
 position: absolute;
}

とした上で，

<div>
<canvas id="parent"></canvas>
<canvas id="children"></canvas>
</div>

という形を取らないと，重ね合わせることができません．