Why are canvas stroke styles overriden by new strokes?

I would like to draw 2 lines. The first line should be red, and the second one should be green. I assumed this would be accomplished by the following code.

<html>
  <canvas id='c'></canvas>
  <script>
    let canvas = document.getElementById('c');
    let ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'red';
    ctx.moveTo(10, 10);
    ctx.lineTo(200, 200);
    ctx.stroke();

    ctx.strokeStyle = 'green';
    ctx.moveTo(20, 200);
    ctx.lineTo(200, 100);
    ctx.stroke();
  </script>
</html>

After the first ctx.stroke() we get the expected result.

A red diagonal line

However, the second ctx.stroke() does something odd to the first stroke.

Two green diagonal lines

I expect the second line to be green, and the first line to remain red, yet they both are drawn with different shades of green.

Why is this happening, and what can I do to avoid this?

The code is availible at this codepen.