Crazy pixels with MovieClip.graphics.drawRect(...)

programming flash
1

I wanted to create a matrix of squares, each square has a side of 4 pixels.
I wanted these squares to be placed with an empty space between them of 4 pixels.
Something like this:
X#X

X#X
Where “X” indicates square and “#” indicates empty space

So I started doing some code… and my code didn’t turn out as expected. Somehow, the height of my squares got a little bigger than the width… I got a rectangle of 5x10 or 6x10 pixels (and an additional black border of 1 pixels, as expected) so I had to decrease the height of the rectangle…

var size = 4;
var i=0;
for (var x1=4;x1<200;x1+=size+4)
for (var y1=4;y1<100;y1+=size+4) {
    var c = 0xFF0000;
    i++;
    mc2.graphics.lineStyle(0);
    mc2.graphics.beginFill(c);
    mc2.graphics.drawRect(x1,y1,size,size-1.5);
    mc2.graphics.endFill();
}

This gave me squares of 6x6 pixels. But the distance (border to border) between them is
6 width but 15 height… if I decrease the “4” in the code “y1+=size+4” it helps. But I wonder why
mc2.graphics.drawRect(x1,y1,size,size);
doesn’t give me equally sized squares of 4x4??

I guess it’s something basic I’ve missed, I’m just not sure WHAT…