ブラウザスクロール時に発生するリサイズイベントへの対処法

以前、作成したWebアプリをレスポンシブに対応させた。その時にリサイズイベントによって横画面へ変更した時の対応を記載したが、リサイズイベントを使用したためにハマった点を記載する。

以下の記事に記載してあるが、猫の絵を書いて点数付け＆ランキング登録をしてくれるアプリ。

レスポンシブに対応したURL
Drawing

今回、スマホを横画面にしてもCanvasの白い領域のサイズが動的に変更されるようにしたかった。そのため、最初は以下のようなコードを書いた。

window.addEventListener('risize',function(){
  sizing();　//Canvasのサイズを変更する関数を別途記載
})

しかし、このままでは以下の問題が生じる。
f:id:c_taquna:20170807015211p:plain
f:id:c_taquna:20170807015215p:plain

2枚めの方が少しだけ白い領域が広くなっているのがわかる。（わかるでしょうか。。わからなくてもそうなっています）
これは上にスクロールするとブラウザのアドレスバーが消えるためその分ブラウザとして領域が広がるためリサイズイベントが発生している。

コードをいかに変更。

window.addEventListener('orientationchange',function(){
  sizing();
})

これは、端末の向きが変わった際にorientationchangeというイベントが発生するため、それをトリガーとしてCanvasをリサイズしている。そのため、スクロールした際にアドレスバーによる領域サイズの変更ではリサイズは発火しない。

結局、以下に書いて有ることの二番煎じの記事ですが、今回の様にCanvasを使用していて、かつリサイズ時に再描画をしていると、スクロールするたびにリサイズイベントが発生し、書いた絵が消えてしまう。こういった問題に対処したい時に使用してください。

たくあんポリポリ