I'll take a shot at your line width question. When you are dragging across the canvas slowly, you get sent an event for every pixel the mouse touches, and your

I'll take a shot at your line width question. When you are dragging across the canvas slowly, you get sent an event for every pixel the mouse touches, and your code is drawing a 20px wide line between each new point. If the pixel is down from the last pixel, it will draw a 1px by 20px horizontal line. If it's the to right it will draw a 1x20px vertical line, because it's just trying to connect the last point to the new point. If the next mouse event happens to be perfectly diagonal from the last, it will draw a 20px wide line that's diagonal. Since the mouse is moving pixel by pixel, if you drag it diagonally, it's path will basically randomly be one of these three movements, so you get a mixture of vertical, horizontal, and diagonal lines. Notice that if you move the mouse quickly enough, you don't get an event for every pixel along the path (since the resolution of the mouse's motion isn't high enough), and it will draw a clean 20px line between each detected point. What I would do to handle this is when you are drawing fat lines, draw a 20px diameter filled circle at the beginning point, then the line to the ending point, then a 20px diameter circle at the end point. This will give you strokes with rounded ends. Another possible improvement along this lines is that you could paint a circle when someone first clicks on the canvas rather than only when they move the mouse.