monaca内でのcanvas全画面処理と画像の表示方法

Monacaは一つのコードでandroidやappleのアプリを同時に作れるのがメリットですが、
端末によってディスプレイのサイズが違うのが難しいところです。

色々な端末があります・・・ 

tableタグなどでレイアウト調整すればいい場合もありますが、
今回苦戦したのがcanvasで大きな一枚絵を表示するケースです。
メインのマップを表示する際、後で色々なエフェクトを足したかったので
canvasを使う方法を選んだのですが、

まず、canvasを全画面にするのに一苦労。
こちらのページを参考にしました。

    var main = document.getElementById("main");
    mainhtml='<div id="wrapper" style="    width: 100%; height: 100%; position: fixed;">';    
    mainhtml+='<canvas id= "world" onclick="coordinate()"></canvas>';      
    mainhtml+='</div>';  
    main.innerHTML =mainhtml;


$(function () {
    sizing();
$(window).resize(function() {
sizing();
});
});

function sizing(){
$("#world").attr({height:$("#wrapper").height()});
$("#world").attr({width:$("#wrapper").width()});
}

これで、画面いっぱいに表示されました。

全画面表示成功

ところが、ipadのような端末のシミュレーターだと、縦横比が異なるため、
mapの見え方が変わってきてしまいます。

間延びした格好に 

というわけで、画像の縦横比とcanvasの縦横比を比べて、
画像のほうが横長のときはcanvas内で縮めて表示するようにしました。
（画像の表示については、他の記事を見てください。）

    if(img.width/canvaswidth> img.height/canvasheight)//横長の比率がcanvasのほうがきついとき
    {
縦を少し縮めて表示
        ctx.drawImage(img,0,0,img.width , img.height*(img.width/canvaswidth)/(img.height/canvasheight),0,0, canvaswidth, canvasheight);
 
    }
    else
    {
//通常通り表示
        ctx.drawImage(img,0,0,img.width , img.height,0,0, canvaswidth, canvasheight);
    }

うまくいきました。下の開いたスペースには、後で飾りを入れてごまかしましょう。