How Create A Line With Borders In Html5 Canvas Properly

I want to draw a path of lines with borders in html, to render the streets in a map, but I could not find any standard way to do that, so I resourced to draw two superposed lines,

Solution 1:

You don't have to draw the line twice. Revert to your first solution and just change the attributes you want - ctx.lineWidth = 16 and ctx.strokeStyle = "yellow" - then ctx.stroke() again.

I discovered this via this answer that describes how to erase from a canvas: jsfiddle here.