/*----------------------------------------
*	expand-and-shrink.js
*		Copyright (C) 2020-2022 StraightApps.com, All Rights Reserved
*			October 17, 2020	初期版
*			November 18, 2022	正式版
*-----------------------------------------*/


//----------------------------------------
//	canvas の設定
//		この部分は、id "canvas-main" 等の定義後でないと、失敗します。

var canvas = document.getElementById('canvas-main');

//	基本となる canvas のサイズ（単位：ピクセル）を指定します。
var w = 360;
var h = 270;

//	これより画面横サイズが狭い場合は、縦横比を保ったまま小さくします。
if ( w > document.documentElement.clientWidth ){
	w = document.documentElement.clientWidth;
	h = w * 270 / 360;
}

//	canvas のサイズを指定します。
canvas.width = w;
canvas.height = h;

//	canvas ごと拡大・縮小するためのサブキャンバスを設定します。

var canvasSub = document.getElementById('canvas-sub');

canvasSub.width = w;
canvasSub.height = h;


//----------------------------------------
//	コンテキストを取得

var ctx = canvas.getContext('2d');
var ctxSub = canvasSub.getContext('2d');


//----------------------------------------
//	スライダーの準備

const slider = document.getElementById('zoom-slider');
slider.min = 1;								// 最小値（デフォルト値 0）
slider.max = 255;							// 最大値（デフォルト値 100）
slider.value = 128;							// 初期値（min/max 指定の後で設定すること）
slider.step = 'any';						// 粒度（デフォルト値 1、any 指定でなめらかに変更可能）


//----------------------------------------
//	イメージの読み込み

const myimg = new Image();
myimg.src = 'jsimg/sf.jpg';

//	画像のサイズを保持します。
var imgW = 0;
var imgH = 0;

//	読み込み完了時の処理を記述します。
myimg.onload = () =>
{
	//	sf.jpg 画像サイズは 720x540 ピクセルで用意しています。
	imgW = myimg.width;
	imgH = myimg.height;

	//	canvas 全体にイメージを描画します。
	ctx.drawImage( myimg, 0, 0, canvas.width, canvas.height );

	//	サブキャンバスはキャンバスのサイズを画像サイズに連動させます。
	ctxSub.drawImage( myimg, 0, 0, canvasSub.width, canvasSub.height );
}


//----------------------------------------
//	スライダーが動かされたら、拡大・縮小して再描画します。

function sliderInput(evt)
{
	//	canvas 全体をいったんクリアします。
	ctx.fillStyle = "rgb( 230, 255, 230 )";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	//	描画倍率を決めます。
	const val = evt.target.value;			// min と max の間のスライダー位置（実数値）

	const scale = val / 255.0;				// スライダー位置が 255 のとき 100% 表示
	ctx.scale( scale, scale );
	ctx.drawImage( myimg, canvas.width / 2 / scale - imgW / 2, canvas.height / 2 / scale - imgH / 2, imgW, imgH );	// canvas に画像を描画（scale 適用）
	ctx.setTransform( 1, 0, 0, 1, 0, 0 );	// "変形行列" を単位行列に戻します（scale のクリア）


	//	サブキャンバスはキャンバスのサイズを画像サイズに連動させます。
	canvasSub.width = imgW * scale;
	canvasSub.height = imgH * scale;
	ctxSub.drawImage( myimg, 0, 0, canvasSub.width, canvasSub.height );
}
slider.addEventListener('input', sliderInput, false);