画布分层＆＃39;导致顶层颜色受底层影响

Question

我使用 JavaScript 和 HTML5 的canvas元素开发了一个尖峰图。

为了实现我的目标，我需要将3 canvas个元素叠加在一起（使用position: absolute）。 但是，尽管opacity＆＃39;上没有canvas属性。 - 我也不用 Alpha 颜色填充矩形，第一层 canvas（浅灰色）总是设法影响它上面的图层颜色。

我在红色图层上使用了直红色（#ff0000），但注意它受蓝色图层（蓝色也受影响）和灰色图层的影响：

相关代码：

function drawCanvas(ctx, samples, color){
    for(var i = 0; i < samples.length; i++){
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.rect(i + (i * 2), 60 - samples[i], 2, samples[i]);
        ctx.fill();
    }
}

var samples = [121,105,107,125,94,96,121];  
// grey layer
drawCanvas(canvasA.getContext("2d"), samples, "#313131");
// blue layer
drawCanvas(canvasB.getContext("2d"), samples, "blue");
// red layer
drawCanvas(canvasC.getContext("2d"), samples, "red");

JsFiddle： https://jsfiddle.net/yk2hjuk5/8/

无法解决为什么会发生这种情况，而且我对使用canvas元素感到很陌生 - 所以我们非常感谢所有的帮助。

干杯。