Make canvas occupy as much space as possible

I’m trying to make my HTML5 Canvas occupy as much space as possible. I’m making a game fore Firefox OS that uses the canvas and testing with the Firefox OS simulator.

By “as much space as possible”, I mean the whole screen, without scrollbars.

Ideally, a cross-platform way (that also works on Android and iOS) is preferred.

You need to do a few things, set the the canvas position to absolute
, and make sure there is no padding, or margins set in the containing element.

The following is what I use in all of my canvas demos

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;
};

Full Screen Demo

Hello, buddy!责编内容来自:Hello, buddy! (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 综合编程 » Make canvas occupy as much space as possible

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录