Drawing adjacent rectangles on a canvas has a small gap between rectangles.
<cut>...</cut>
This creates the attached image, where there is a visible gap between the rectangles.
If I change the code to this - note the 101 in the first Rectangle - then the rectangles align perfectly.
<cut>...</cut>
This seems wrong to me, is there an option or explanation that I'm missing?
Try drawing these rectangles as filled rectangles, for example, the left rectangle in red and the right one in blue, but without any outlines. Then, take two screenshots of both drawn cases, paste them (each separately) into a graphics editor, and enlarge them several times. You will then notice that in the case of the code that adds 1 pixel:
Rectangle (10,10,101,100);
the edge of the rectangle drawn later slightly obscures the edge of the rectangle drawn earlier. Exactly 1 pixel wide. Avoiding this behavior would probably be more cumbersome than adding 1 pixel in your case. Your image, named "separate.jpg," actually shows two adjacent rectangles (aligned). But the optical illusion creates the impression that they are separated because you only drew the outlines of the rectangles.
Therefore, the drawing routines work so that the graphic shape is drawn to a coordinate that is 1 pixel smaller (both vertically and horizontally) than the given one. This was probably to avoid overlapping 1 pixel wide shapes. Avoiding the overlap would probably be more cumbersome to work around than adding 1 pixel for your case.