CODEWITHSUNDEEP
javascriptfirefoxcanvas
alexgolec
alexgolec

Reputation: 28252

How can I expand a canvas to the entire viewport in Firefox?

I've got a static, test version of my website hosted here:

http://alexgolec.staticloud.com/

but when I fire it up in Firefox, the canvas does not resize properly. I think the offending line of code is here: 

    var _docHeight = (document.height !== undefined) ? document.height : 
                      document.body.offsetHeight;
    var _docWidth = (document.width !== undefined) ? document.width : 
                     document.body.offsetWidth;

    ctx.canvas.width = _docWidth;
    ctx.canvas.height = _docHeight;

This code works correctly in WebKit browsers, but Gecko seems to barf on it.

Upvotes: 1

Views: 67

Answers (1)

xiaoyi
xiaoyi

Reputation: 6741

The page looks great. But I don't think you get it right on Chrome either, as the background is not re-painted after resize.

You should attach an event listener to onResize event, and call canvasMain() from that handler to repaint every thing with new canvas size.

About the sizing problem, you should use window.innerWidth and window.innerHeight. Because <body> is packed to the content which is only 320px height, so it won't fill up the whole page.

Upvotes: 2

Related Questions