The Canvas 2D strokeStyle property sets the color or paint used for outlining paths and shapes. Assign it before calling stroke(). section 15.2.3
A typical drawing sequence starts a path, defines a shape, chooses its strokeStyle, and renders the outline. Use beginPath() before a new shape so an earlier path does not inherit the current stroke style. section 15.2.3
Outline a rectangle
context.beginPath(); context.rect(346, 233, 106, 80); context.strokeStyle = "#6ba5d7"; context.stroke();
Group shapes that share a style, then draw them together. When the outline color changes, update strokeStyle before rendering the next path; combine it with fillStyle when a shape needs both an interior and a border. section 15.2.3
Style circles by category
For each Canvas circle, assign fillStyle from the subject color and choose strokeStyle from its medium before calling beginPath(), arc(), fill(), and stroke(). section 15.3
