HTML5 canvas - same RGBA style produces different colours when alpha < 1 - html

Question

In the example below, the same strokeStyle produces different colours, varying according to the length of the line (?).
This only happens if alpha < 1.
What is the reason for this weird behaviour? Is there a better way to set the transparency of the stroke, so that I get the same result regardless of the length?
Thank you.
var c = document.getElementById('c1');
var ctx = c.getContext('2d');
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, 400, 400);
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(0, 0, 255, 0.3)';
ctx.moveTo(10, 10);
ctx.lineTo(20, 10);
ctx.stroke();
ctx.moveTo(10, 30);
ctx.lineTo(40, 30);
ctx.stroke();
ctx.moveTo(10, 50);
ctx.lineTo(80, 50);
ctx.stroke();
ctx.moveTo(10, 70);
ctx.lineTo(160, 70);
ctx.stroke();
ctx.moveTo(10, 90);
ctx.lineTo(320, 90);
ctx.stroke();
#c1 {
border: 1px solid black;
}
<canvas width="330" height="100" id="c1">
</canvas>

Answer 1

var c = document.getElementById('c1');
var ctx = c.getContext('2d');
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, 400, 400);
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(0, 0, 255, 0.3)';
ctx.moveTo(10, 10);
ctx.lineTo(20, 10);
ctx.moveTo(10, 30);
ctx.lineTo(40, 30);
ctx.moveTo(10, 50);
ctx.lineTo(80, 50);
ctx.moveTo(10, 70);
ctx.lineTo(160, 70);
ctx.moveTo(10, 90);
ctx.lineTo(320, 90);
ctx.stroke();
#c1 {
border: 1px solid black;
}
<canvas width="330" height="100" id="c1">
</canvas>
I do not know the cause for this behaviour, but the solution is to only stroke at the end.
Hope this helps!