html5 画布背景图片加载不出来

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5 canvas 设置背景图</title>
        <script src="canvas2image.js"></script>
    </head>
    <body>
        <canvas id="canvaxbox" width="500" height="500"></canvas>
    </body>
    <script>
        var c = document.getElementById("canvaxbox");
        var canvas = c.getContext("2d");
        var img = new Image();
        img.src = "pg1.JPG";
        img.onload = imgfn;//图片加载完在执行
        function imgfn() {
            var bg = canvas.createPattern(img, "no-repeat");//createPattern() 方法在指定的方向内重复指定的元素。
            canvas.fillStyle = bg;//fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
            canvas.fillRect(0, 0, c.width, c.height);//绘制已填充矩形fillRect(左上角x坐标, 左上角y坐标, 宽, 高)
        }
    </script>
</html>