Someone explain why this isn't filling in the square

Question

It's just making a red line along the top and left edge and I don't understand why. Shouldn't the nested for loops iterate through every possible x,y coordinate?

function createSquare() {
    var height = 50;
    var width = 50;
    var img = new PNGlib(width, height, 256);
    var background = img.color(0, 0, 0, 0);

    for (var x = 0; x <= width; x ++) {
        for (var y = 0; y <= height; y ++) {
            img.buffer[img.index(x, y)] = img.color(0xFF, 0x00, 0x00);
        }
    }

    return ('<img src="data:image/png;base64,' + img.getBase64() + '">');
}

Answer 1

I never used PNGLib (would be interesting to try, though), but from my experience <= used in for loop exit condition is almost always an error. )