Canvasサイズ固定のステージに画像を中央配置するやり方

こんにちわ。nap5です。

Canvasサイズ固定のステージに画像を中央配置するやり方の一つを紹介したいと思います

CanvasRenderingContext2D.drawImage() - Web APIs | MDN

完成するUIは以下のようなイメージになります。

ポートレイト（縦長画像）の場合

ランドスケープ（横長画像）の場合

CodePenに動作確認できるサンプルを置きました。

実装のポイントとしてはcanvas画像の中央位置とサイズ固定されたプレビューエリアの左上位置の平行移動量を事前に求めて、canvasAPIの一つであるdrawImage（引数5個の場合）の第2、3引数にそれぞれ平行移動量X、平行移動量Yを指定することがポイントになります。

あとは縮尺率を画像がポートレイトの場合はプレビューエリアの縦長を正として、ランドスケープの場合はプレビューエリアの横長を正として、それぞれ求めてプレビューエリアに収まるように調節することがポイントになります。

簡単ですが、以上になります。