为什么第一次没有显示图像？

Question

这是一个图像的像素化，通过补充作为图块的一个图块（递归）。所有这些似乎都适用于我的代码，但图像仅在我第二次重新加载页面后显示自己（在Google Chrome上从Brackets中），而在Safari中它根本不起作用;控制台显示错误：

  

IndexSizeError：DOM例外1：索引或大小为负数，或大于允许值。

为什么呢？提前谢谢。

var canvas = undefined;
var ctx = undefined;
var img = undefined;

function createCanvas() {
    canvas = document.createElement('canvas');
    canvas.width = document.getElementById('retrato').naturalWidth;
    canvas.height = document.getElementById('retrato').naturalHeight;
    ctx = canvas.getContext('2d');
    document.body.appendChild(canvas);
    img = document.getElementById('retrato');
}

createCanvas();

function ProtoImage (sx, sy, swidth, sheight, x, y, width, height) {
    this.sx = sx;
    this.sy = sy;
    this.swidth = swidth;
    this.sheight = sheight;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.draw = function (x, y, count1, count2) {
        if (count1 > 0) {
            ctx.drawImage(img, this.sx, this.sy, this.swidth, this.sheight, this.x + x, this.y, this.width / countX, this.height / countX);
            return this.draw(x + this.width / countX, this.height / countX, count1 - 1, count2);
        }
        else if (count2 > 0) {
            var imgData = ctx.getImageData(this.x, this.y, this.width, this.height / countX);
            ctx.putImageData(imgData,this.x, this.y + y);
            return this.draw(x, y + this.height / countX, count1, count2 - 1);
        }
        else {
            return false;
        }
    };
}

var div = undefined;
var countX = undefined;
var countY = undefined;

function ask() {
    div = prompt('How many tiles/canvas');
    countX = prompt('How many tiles/tiles?');
    countY = countX - 1;
}

function functionGenerAt (Y) {
    this.width = document.getElementById('retrato').naturalWidth;
    this.height = document.getElementById('retrato').naturalHeight;
    this.Y = Y;
    this.GenerAt = function(row , x){
        if(row > 0) {
            var pxl = new ProtoImage(x, this.Y, this.width / div, this.height / div, x, this.Y, this.width / div, this.height / div);
            pxl.draw(0, 0, countX, countY);
            return this.GenerAt (row - 1, x + this.width / div);
        }
        else {
            return false;
        }
    };
    this.engage = function(count, row) {
        if (count > 0) {
            var lineY = new functionGenerAt (row);
            lineY.GenerAt(div, 0);
            return this.engage (count -1, row + this.height / div);
        }
        else {
            return false;
        }
    };
}

var BOM = new functionGenerAt(0);
ask();
BOM.engage(div, 0);