I learned basic computer graphics in college and wrote my first programs on an original IBM PC with a Hercules graphics card. I remember that if you specified a start and end pixel that both of those pixels, along with those in between, would be drawn by default. This was entirely a function of the software drivers we used (or those we wrote for class). I later spent many years working with graphics in various of the Borland language products including Turbo Pascal (for DOS) and Delphi and C++ Builder (for Windows). I don’t think it was true of Turbo Pascal/DOS, but the Windows-based products and their OWL libraries had a component called Tcanvas that had a particular way of drawing lines. It would draw all of the pixels in the line except the final one. It assumed that if you were drawing a series of lines, especially for a closed shape, then the next line would always draw the missing pixel. If you really, really needed to draw that last pixel you had to do it yourself. This process is illustrated as the red line is drawn from 1,1 to 1,10, the blue line from 1,10 to 10,10, and the green pixel at 10,10. If the lines had a thickness of greater than 1.0 things worked a bit differently but I almost always worked with one-pixel lines for various reasons.
The HTML5 canvas object uses the lineCap property to accomplish the same thing. The values are “butt”, which ends the line at the points specified, “round”, which draws a round end centered on each endpoint (of the same diameter as the thickness of the line), and “square”, which extends each end of the line by drawing an additional square whose dimensions match the line thickness. The square is also centered on the end of the line so in truth the line is extended by a half-square. If the thickness of the line is 1.0 then setting the value to “round” has the same effect as setting it to square. You can find a nice explanation of all this here.
I noticed that some of the lines in my display looked a bit spotty at times so yesterday I changed the lineCap property to “square” from the default value of “butt” I had used in the original demo. In order to see the effect of changing the lineCap property I added an extra button at bottom right of the display that toggles between the three possible states. The effect is most noticeable when the offset is set to zero and the furnace is somewhat rotated. I’ve added screen captured that illustrate the effect below.
“butt”
“round”
“square”
The point is that graphic systems, like every other kind of system, have a number of variations and details you need to keep in mind.