drawRect too big

Question

This pretty simple drawing command creates a traced red rectangle 11x11 pixels:

_sp.graphics.lineStyle( 1, 0xFF0000, 1, true, LineScaleMode.NORMAL, CapsStyle.NONE, JointStyle.MITER, 3 );
_sp.graphics.drawRect( 10, 10, 10, 10 );

What is the secret to making it 10x10 pixels?

If I fill a rectangle with the same drawRect parameters it turns out 10x10 pixels:

_sp.graphics.beginFill( 0xFF0000, 1 );
_sp.graphics.drawRect( 10, 10, 10, 10 );
_sp.graphics.endFill( );

I would prefer not to drawRect( 10, 10, 9, 9 ); as that seems like a hack.

Answer 1

When you draw a 10x10 rectangle, as in your second code snippet, Flash draws what you expect. But in your first snippet, you're drawing a vector edge around a 10x10 rectangle. In theory, Flash could fulfill that request by drawing a 12x12 edge that surrounds a 10x10 rectangle, or by drawing a 10x10 rectangle that overlaps a 10x10 rectangle (thus surrounding an 8x8 rectangle). In practice, Flash splits the difference, choosing to to surround the shape on two edges and overlap it on the other two. But even then, if you start drawing on half-pixels and so on, you may find the behavior differs subtly, as vector drawing is a complicated business, and Flash's renderer is highly optimized.

For pixel-level control over where the lines are drawn, you should draw them individually with moveTo() and lineTo().