上端と左端に沿って赤い線を引いているだけで、その理由がわかりません。ネストされた for ループは、考えられるすべての x,y 座標を反復処理すべきではありませんか?
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() + '">');
}