

To fix this, you have to be very precise in your path creation. This is what happens with the 1.0 width line in the previous example code.

An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. If you consider a path from (3,1) to (3,5) with a line thickness of 1.0, you end up with the situation in the second image. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The squares between gridlines are actual on-screen pixels. In the images below, the grid represents the canvas coordinate grid. Obtaining crisp lines requires understanding how paths are stroked.
