UI rendering corrections and constrained angles feature

[mwomick]

Description

I added a new feature where users can hold down 'Shift' to constrain angles to 45-degree increments. This is especially helpful for some special cases where lines are often vertical or horizontal. I also fixed a lot of rendering bugs. For example, previously, the 'Clear all polygons' feature caused polygons/lines to change color upon closure. Additionally, I changed the rendering order so that shapes being drawn appear above rather than below the existing shapes. I also changed the order so that the polygon fill is not drawn over the lines, and the lines are not drawn over the nodes. Previously, the lines were drawn in the same color until a polygon was drawn and then lines would be drawn in the next color in the queue. Now each line is drawn in a new color. Previously the nodes were not drawn on the canvas until the mouse moved, but now they are drawn as soon as the user clicks. And lastly, I changed the lineJoin type to be bevel instead of miter because small angles could cause ugly sharp points that extended beyond the nodes.

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)

How has this change been tested, please provide a testcase or example of how you tested the change?

I tested this manually by using Safari and Chrome.

Any specific deployment considerations

No.

[capjamesg]

This is an excellent set of changes. All looks good to me from testing. The shift feature is great to have. A potential nice to have is to document the shift key shortcut somewhere on the landing page, but it isn't necessary. I'm going to merge this PR.