The two charts in figures 10 and 11 look the same to me, but 14 and 15 do look different.
We do position the bars at whole pixel boundaries. But if a stroke width is drawn around the bars, half of the stroke will be drawn outside the rectangle and half on the inside. So if the stroke width is an odd size (e.g. stroke-width: 1) then half pixels will be drawn outside and inside, and anti-aliasing will kick in to smooth it to a fuzzy blur. If you use an even size stroke, then a whole number of pixels will be used both outside and inside, so it will then look sharp.