html5のcanvasで，画像の上に線を描画する - モバイル通信とIT技術をコツコツ勉強するブログ

html5のcanvasで，「画像の上」に線を描画してみよう。

まず画像のロードが完了してから，画像の表示を行ない，

そのあとで線を描画するのがポイント。

サンプルコード：

<!doctype html>
<html lang="ja">
<head></head>
<body>


描画領域<br>
<canvas id="hoge" width="1000" height="1000"></canvas>


<script>

function init(){
	// 画像の表示イベント
	var img = new Image();
	img.src = "sample.jpg";
	img.onload = function(){
		// 画像を表示
		ctx.drawImage(img,0,0,500,500);
		
		// 線を描画
		ctx.beginPath();
		ctx.moveTo(0, 0);
		ctx.lineTo(200, 200);
		ctx.stroke();
	}
}

// 実行をセット
var ctx;
document.body.onload = function(){

	ctx = document.querySelector("#hoge").getContext("2d");

	init();

}

</script>


</body>
</html>

参考資料：

画像を組み込む - Canvas - HTML5.JP
http://www.html5.jp/canvas/how6.html

Imageオブジェクトは、画像が読み込まれない限り、Imageオブジェクトとしての機能を果たすことができません

メソッドを呼び出す前に、画像のロードが完了するようにする（プリロードする）

Canvasで画像の上に線を引くには。 Canvasで画像を表示し、その..
http://q.hatena.ne.jp/1382538311