【18：スクラッチくじ】Canvasをレイヤーの様に使う

f:id:seintoseiya:20150702212803p:plain
プロジェクトNo.18：スクラッチくじ

Canvasを２枚重ねて、前面のcanvasをマウスダウンとマウスムーブで消すといったものを作りました。

Canvasをレイヤーの様に使うために

まずHTMLで２つのcanvasエレメントを用意します。

HTML

<canvas id="parent" width="400" height="300"></canvas>
<canvas id="child" width="400" height="300"></canvas>

次にCSSでcanvasに対してposition: absoluteを指定。

CSS

canvas{
	position: absolute;
}
 ||<

あとは、JavaScriptの方でそれぞれのcanvasエレメントに対してオブジェクト生成し、
それぞれに処理を行っていきます。
***JavaScript
>|javascript|
$(function(){
    var canvas = document.getElementById('parent');
    var canvas2 = document.getElementById('child');
    if(!canvas || !canvas.getContext) return false;
    if(!canvas2 || !canvas2.getContext) return false;
    var ctx = canvas.getContext('2d');
    var ctx2 = canvas2.getContext('2d’);

    // 省略

}