Moved clearRect one pixel to the left to match lineWidth. Made clearRect 2px wide to make sure both sides of the line path are cleared.
The problem was not with the width of the line been draw but with the position of the rectangle used to clear the line
The line width is the thickness of the stroke centered on the given path. In other words, the area that's drawn extends to half the line width on either side of the path.
clearRect()sets all pixels in the rectangle defined by starting point (x, y) and size (width, height)
Because the same x,y was use to draw the line path and for clearRect(), only half the line was delete, since the other half was outside the clearRect rectangle.
Moved clearRect one pixel to the left to match lineWidth. Made clearRect 2px wide to make sure both sides of the line path are cleared.
The problem was not with the width of the line been draw but with the position of the rectangle used to clear the line
The line width is the thickness of the stroke centered on the given path. In other words, the area that's drawn extends to half the line width on either side of the path.
clearRect()sets all pixels in the rectangle defined by starting point (x, y) and size (width, height)
Because the same x,y was use to draw the line path and for clearRect(), only half the line was delete, since the other half was outside the clearRect rectangle.