I'm drawing a stroke on a canvas like this:
// draw a red line
ctx.strokeStyle = 'rgba(255, 0, 0, 1.0)';
ctx.moveTo(1, 1, 1, 1);
ctx.lineTo(1, 1, 10, 10);
Later, some of these lines get overwritten by another stroke of identical length and position, but in a different color:
// draw a white line
ctx.strokeStyle = 'rgba(255, 255, 255, 1.0)';
ctx.moveTo(1, 1, 1, 1);
ctx.lineTo(1, 1, 10, 10);
Now what's happening is that the line is still there, just lighter red - the white stroke and the red stroke are mixed to make a pink stroke.
I've tried setting globalAlpha = 1.0, I've tried changing the globalCompositeOperation, I've turned imageSmoothingEnabled on and off...nothing.
It seems as though an alpha of 1.0 isn't being respected no matter what I do. There's always some alpha blending happening.
I've noticed as well that if I set the lineCap parameter, the places where the line caps overlap is a darker color as well, meaning the original stroke is blending a bit with the background and it's getting darker where multiple strokes overlap.
So I have no idea what I'm doing wrong here: the background is blending with my strokes and strokes are blending with each other, regardless of globalAlpha, the strokeStyle alpha, the globalCompositingOperation, and whatever else...
Please let me know if I'm missing something obvious. Thank you!
