[HTML5] マウスを押してる時にcanvasに絵を描く

コメントをどうぞ

　HTML5とJavascriptを使えばブラウザでお絵かきできるって聞いて、色々試行錯誤してました。マウスをクリックしている時にcanvas上に絵を描きます。以下はコードのメモ。

サンプルページ

<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas style="display: block; border: 1px solid black;" id ="canvas" width="600" height="405"></canvas>
<script>
	<!--
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext('2d');

	var x = 0;
	var y = 0;
	draw = false;

	//マウスの座標を取得する
	canvas.addEventListener("mousemove",function(e) {
		var rect = e.target.getBoundingClientRect();
		x = e.clientX - rect.left;
		y = e.clientY - rect.top;
  
	//クリック状態なら描画をする
	if(draw === true) {
		ctx.beginPath();
		ctx.arc(x, y, 10, 0, 2*Math.PI, false);
		ctx.fill();
	}
	});
  
	//クリックしたら描画をOKの状態にする
	canvas.addEventListener("mousedown",function(e) {
		draw = true;
	});

	//クリックを離したら、描画を終了する
	canvas.addEventListener("mouseup", function(e){
		draw = false;
	});
	// -->
</script>
</body>
</html>

でもこのコードじゃ描く一方で消せないんですよね。

コメントを残すコメントをキャンセル