Poor line quality withJS Graphics 2D Drawing

Question

I am dismayed at the poor quality of lines I draw in Graphics2D. When I draw a line with lineWidth=1 and strokeStyle="black" I would expect the line to look the same as the border of my canvas, which is 1px solid black. But no, the line is (or at least looks) wider, and is kind of fuzzy and gray rather than black. See attached image which is the output of this code:

ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.strokeRect(3, 3, 150, 150);

<canvas id="canvas" width="200" height="200" style="border:1px solid black"></canvas>

Any ideas ? I am also intrigued by the (very faint) shadow lines on each side of the border as well as the drawn lines (admittedly you only see these when the image is enlarged).