html - キャンバスができるだけ多くのスペースを占めるようにする

Question

HTML5キャンバスができるだけ多くのスペースを占めるようにしようとしています。キャンバスを使用するFirefoxOSのゲームを作成し、FirefoxOSシミュレーターでテストしています。

「できるだけ多くのスペース」とは、スクロールバーを含まない画面全体を意味します。

理想的には、クロスプラットフォームの方法（AndroidとiOSでも機能します）が推奨されます。

Answer 1

いくつかのことを行い、キャンバスの位置をabsoluteに設定し、含まれている要素にパディングやマージンが設定されていないことを確認する必要があります。

以下は、すべてのキャンバスデモで使用しているものです

CSS

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
canvas {
    position:absolute;
}

JavaScript

var canvas = document.getElementById("canvas"),
    width = window.innerWidth,
    height = document.body.offsetHeight;

window.onresize = function () {
    height = canvas.height = document.body.offsetHeight;
    width = canvas.width = document.body.offsetWidth;
};

フルスクリーンデモ

Answer 2

これでうまくいくはずです：

$("canvas").width($("body").width());
$("canvas").height($("body").height());

window.onresize = function(){
  $("canvas").width($("body").width());
  $("canvas").height($("body").height());
};

キャンバスをキャンバスセレクターに置き換えます。これにはjQueryが必要です。