JavaScript｜アスペクト比守ったままCanvasに最大幅表示する関数

横幅－＋、縦幅－＋ボタンでスクリーンサイズが変化するので動きを試せます。

スクリーンサイズとは通常window.innerWidth、window.innerHeightとする部分。ゲームでは<canvas></canvas>が設置される場所のこと。

WmSize()関数にて変数gWidth、gHeightを得ます→その値で仮想画面を実画面に転写。

//【】								ブラウザサイズ変更
function WmSize(){
	ca = document.getElementById( 'can' );			//mainキャンバス要素取得
	rg = ca.getContext( '2d' );				//2D描画コンテキスト取得
	ca.width = window.innerWidth;				//キャンバスサイズ変更
	ca.height = window.innerHeight;				//キャンバスサイズ変更

	//実画面サイズ計測→アスペクト比維持したままの最大サイズ計測
	gWidth = ca.width;
	gHeight = ca.height;
	var W=SCR_W;var H=SCR_H;
	var asp=H/W;
	var kw=gWidth/W;
	var kh=gHeight/(2*H-W)/asp;
	if(kw*(2*H-W)*asp>gHeight){
		gWidth = W * kh;
		gHeight = H * kh;
	}else{
		gHeight = H * kw;
	}
}

vaは仮想画面、変数SCR_W・変数SCR_Hは仮想画面の幅と高さ。

//【】								仮想画面→実画面転写
	rg.drawImage( va, 0, 0, va.width, va.height, 0, 0, gWidth, gHeight*SCR_W/SCR_H );