关于canvas无法通过drawImage加载的原因

在使用drawImage方法的时候，发现无法加载

                var can = $('#mycanvas')[0];
                var cxt = can.getContext('2d');
                var bg = new Image();
                bg.src = "img/bg.jpg";
                cxt.drawImage(bg, 0, 0);

原因是图片的加载时异步的。在资源还没有加载完成的时候就执行了drawImage所以无法成功加载到画布当中。正确的写法应该是保证图片在onload以后才调用drawImage，而不是网上说的window.onload，因为我们的文档中并没有IMG元素

    var can = $('#mycanvas')[0];
                var cxt = can.getContext('2d');
                var bg = new Image();
                bg.src = "img/bg.jpg";
                //图片资源加载时异步的。必须保证图片资源加载完成后才行
                bg.onload = function() {

                    cxt.drawImage(bg, 0, 0);

                }