加載畫布時的尺寸設置不正確

Question

我有一個功能正常的畫布網頁，但偶爾會在啓動時大小不正確。 說我必須聲明這樣一個帆布的HTML標籤：

<canvas id="main_canvas"></canvas> 

而且我已經包含的JavaScript文件使用jquery

$(function() { 
    var canvas = $('canvas')[0]; 

    var DISPLAY_WIDTH = window.innerWidth-10, 
     DISPLAY_HEIGHT = 620, 

頁面後偶爾，是以上漿的關懷加載畫布大小擠入一個非常小的區域，所有呈現的對象都堆疊在一起，如果我刷新但是這個問題不再存在。我用的是檢查元素工具，並發現，雖然大小問題發生我的HTML代碼

<canvas id="main_canvas" width="-10" height="620"></canvas> 

似乎對未獲取window.innerwidth一些未知的原因，寬度被簡單地設置到-10，並導致該問題。但jquery聲明$(function(){})應該只在頁面加載後執行，我不認爲我可以在html標記中使用window.innerWidth。而且我不想將寬度設置爲其他數值，因爲此問題可能會再次發生，我只是將該數字寬度作爲我的畫布寬度。

無論如何可以告訴我一些修復？由於

Answer 1

如果你把它所有的

$(document).ready(function() 

功能？報價：

一旦裝入DOM，並且在加載頁面內容之前，其中的所有內容都將加載。 （來源：http://www.learningjquery.com/2006/09/introducing-document-ready）