Javascript 自定义Joomla模块中的画布出现问题

我正在构建一个定制的Joomla模块，并试图用画布显示一个图像。代码如下：

<script language="javascript" type="text/javascript">

function drawXpBar() {
     var xpPlot = document.getElementById('xpBar').getContext('2d');
     var img = new Image();
     img.onload = function() {
     xpPlot.drawImage(img,0,0);
     }
     img.src = 'images/xpBarBg.png';
     }
window.onload.drawXpBar();
</script>

但是，当页面呈现图像时，图像不会出现。我使用巫师输入了代码，它位于{source}块中。当我在Chrome中使用inspect元素时，它向我显示错误UncaughtTypeError:无法调用null的方法'drawXpBar'。这不意味着它认为函数还没有定义吗？如有任何建议，将不胜感激

---

我试过了，得到了错误UncaughtTypeError:无法调用null的方法'getContext'drawXpBar@Maverick575也发html，你知道吗？事实上，我刚刚在别处读到javascript必须在画布上运行。我刚刚移动了代码，现在它正在工作。我想我以前试过，但因为我有window.onload.drawXpBar；它不起作用了。多亏了您的回复，再加上一点挖掘，画布现在可以正常工作了。谢谢

window.onload = drawXpBar(); //call function on window load event