/*----------------------------------------
*	multi-touch.js
*		Copyright (C) 2020 StraightApps.com, All Rights Reserved
*			October 23, 2020	初期版
*-----------------------------------------*/


//	画面サイズ・ブラウザサイズを取得
var scr = new Object();						// 画面のサイズ情報を保持するオブジェクト
scr.width = screen.width;					// 画面のサイズ
scr.innerWidth = window.innerWidth;			// ウィンドウ内側の幅
scr.innerHeight = window.innerHeight;		// ウィンドウ内側の高さ
scr.clientWidth = document.documentElement.clientWidth;	// 基本的にはinnerHeightと同じ？


//	canvasの設定
var canvas = document.getElementById('canvas-main');
canvas.width = scr.innerWidth;				//canvasの横幅
canvas.height = scr.innerHeight;			//canvasの縦幅


//	コンテキストを取得
var ctx = canvas.getContext('2d');


//	初期の色で塗りつぶし
ctx.fillStyle = "rgb(192,192,192)";
ctx.fillRect(0, 0, canvas.width, canvas.height);


//----------------------------------------
//	タッチイベントの監視開始
function startup()
{
	canvas.addEventListener("touchstart", TouchStart, false);	// １タッチ目が開始された
	canvas.addEventListener("touchend", TouchEnd, false);		// タッチが終了した
	canvas.addEventListener("touchcancel", TouchCancel, false);	// 場外（ブラウザのコントロール領域など）に出た
	canvas.addEventListener("touchmove", TouchMove, false);		// タッチしたまま移動した
}

if (document.readyState === 'loading') {
	document.addEventListener("DOMContentLoaded", startup);
}
else{
	startup();
}


//----------------------------------------
//	１タッチ目が開始されたとき
function TouchStart(event)
{
	event.preventDefault();						// デフォルトの処理を禁止

	ctx.fillStyle = "rgb(220,255,220)";
	ctx.fillRect(0, 0, canvas.width, canvas.height);
}


//----------------------------------------
//	タッチが終了したとき
function TouchEnd(event)
{
	event.preventDefault();

	ctx.fillStyle = "rgb(220,220,255)";
	ctx.fillRect(0, 0, canvas.width, canvas.height);
}


//----------------------------------------
//	タッチが中断されたとき
function TouchCancel(event)
{
	event.preventDefault();

	ctx.fillStyle = "rgb(255,0,0)";
	ctx.fillRect(0, 0, canvas.width, canvas.height);
}


//----------------------------------------
//	タッチしたまま移動を検出したとき
function TouchMove(event)
{
/*
	if (event.cancelable){
		str = "キャンセル可能";
	}
*/
	event.preventDefault();
/*
	if (event.defaultPrevented){
		str += " 禁止された";
	}
*/

	//	Firefox では、「キャンセル可能」かつ「禁止された」になりますが、preventDefault は動作しません。
	//	このため、canvas 内で操作していても、ページがスクロールしてしまいます。

	//	canvas の絶対座標位置を取得します。
	//		※ スクロール状態に関係なくページに対する座標。
	var rect = event.target.getBoundingClientRect();

	//	canvas 内に１タッチだけある場合
	if (event.targetTouches.length == 1) {

		//	動きがわかりやすいように、ピンクでクリア
		ctx.fillStyle = "rgb(255,220,220)";
		ctx.fillRect(0, 0, canvas.width, canvas.height);

		var touch = event.targetTouches[0];					// タッチ１の座標
		let x = Math.floor( touch.clientX - rect.left);		// 現在のスクロール位置に対する座標
		let y = Math.floor( touch.clientY - rect.top);
		//let x = Math.floor( touch.pageX - rect.left);		// スクロール状態に関係なくページに対する座標
		//let y = Math.floor( touch.pageY - rect.top);

		ctx.font = "16px 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ ゴシック', 'MS Gothic', sans-serif";
		ctx.fillStyle = "#000";
		ctx.fillText( touch.pageY, 10, 20 );			// クライアント領域の座標（y座標は'下'を指している）
		ctx.fillText( touch.clientY, 10, 40 );			// クライアント領域の座標（y座標は'下'を指している）
		ctx.fillText( rect.top, 10, 60 );

		ctx.fillStyle = "rgb(0,0,0)";
		ctx.fillRect( x - 25, y - 25, 50, 50 );
	}
	else if (event.targetTouches.length == 2) {

		//	動きがわかりやすいように、グリーンでクリア
		ctx.fillStyle = "rgb(128,255,128)";
		ctx.fillRect(0, 0, canvas.width, canvas.height);

		//	描画準備
		ctx.lineWidth = 1;
		var sx = 0, sy = 0;								// １点目の座標
		var x, y;

		for (var i = 0; i < event.touches.length; i++) {
			var touch = event.touches[i];
			x = Math.floor( touch.clientX - rect.left);	// 現在のスクロール位置に対する座標
			y = Math.floor( touch.clientY - rect.top);

			ctx.fillStyle = "rgb(0,0,255)";
			if (i == 0){								// １点目の座標を保存
				sx = x;
				sy = y;
				ctx.fillStyle = "rgb(255,0,0)";
			}


			ctx.beginPath();
			ctx.arc( x, y, 20, 0, 2 * Math.PI, true );	// 座標, 半径, 開始ラジアン角, 終了ラジアン角, 時計回りに描画
			ctx.fill();
			ctx.stroke();
		}

		ctx.lineWidth = 10;
		ctx.lineCap = "round";	// butt、square も使える

		ctx.beginPath();
		ctx.moveTo( sx, sy );
		ctx.lineTo( x, y );
		//closePath();	lineTo を２回以上使用して始点まで線を引きたいとき
		ctx.stroke();
	}
}