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() + '">');
}

Not sure why it didn't hit me that it still increments after it meets the condition, so < is what I wanted, and it fixed the problem. Please post as answer so I can credit you @raina77ow — JOATMON, Jun 24 '12 at 20:19
Never mind, it's one of the most common types of bugs I've seen in codebase I worked with. That's why I usually fix these almost automatically - and write some big comment explaining why `<=` is used in some particular case, if that turns out to be not a bug. ) — raina77ow, Jun 24 '12 at 20:22

score 1 · Accepted Answer · answered Jun 24 '12 at 20:20

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. )

answered Jun 24 '12 at 20:20

raina77ow

91,589
12
180
210

Good catch. I'm admittedly curious as to why this produced that behavior though. – djechlin Jun 24 '12 at 20:23

Someone explain why this isn't filling in the square

1 Answers1