画像を読み込んでから描画[解説]
画像描画の罠です。


		var img = new Image();
		img.src = "cog.png";
		context.drawImage(img, 60, 35);
これでは描画されません。描画するときにまだ画像ファイルが読み込まれていないからです。JavaScript特有のことです。

画像を読み込んでから描画

		var img = new Image();
		img.src = "cog.png";
		img.onload = function(){
			context.drawImage(img, 60, 35);
		}
onloadを使って画像が読み込まれてから描画します。
全ソースです。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8" />
	<title>画像読み込んでから描画</title>
	<style>
	#canvas{
		background-color: aquamarine;
	}	
	</style>

	<script type="text/javascript">
		var context = null;
		var canvas = null;

		function timerTask() {
			var img = new Image();
			img.src = "cog.png";
			img.onload = function(){
				context.drawImage(img, 60, 35);
			}
		}

		function init() {
			//描画コンテキストの取得
			canvas = document.getElementById('canvas');
			context = canvas.getContext('2d');
			// window.setInterval(timerTask, 100);
            timerTask();
		}
	</script>

</head>

<body onLoad="init()">
	<canvas width="200" height="150" id="canvas"></canvas><br>
	解説は<a href="image_onload_.html">こちら</a>。
</body>

</html>