加载画布时的尺寸设置不正确

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）