为什么HTML Canvas描边函数呈现的颜色不是指定的颜色？

Question

出于实验目的，我编写了一些简单的代码以在HTML画布上绘制矩形，一个函数以红色绘制矩形，一个函数以白色绘制矩形。最终目的是使用它们在红色和白色之间闪烁，以信号表示可能会发出信号的给定矩形（或正方形，视情况而定）。

但是，在测试代码时，我发现有些奇怪。

我在代码中指定了颜色，白色为rgba（255，255，255，1），红色为rgba（255，0，0，1）。当我运行代码（在下面列出）时，我实际上获得的颜色如下：

开始：128、128、128

点击“测试1”：191、64、64

点击“测试2”：223、159、159

下面给出了整个测试代码。

function DrawRed() {
  var ref = document.getElementById("MainCanvas");
  var ctx = ref.getContext("2d");

  ctx.strokeStyle = "rgba(255, 0, 0, 1)";
  ctx.fillStyle = "rgba(255, 0, 0, 1)";
  ctx.lineWidth = 1;

  //ctx.beginPath();
  //ctx.moveTo(60, 60);
  //ctx.lineTo(60, 120);
  //ctx.lineTo(120, 120);
  //ctx.lineTo(120, 60);
  //ctx.lineTo(60, 60);
  //ctx.stroke();

  ctx.strokeRect(60, 60, 60, 60);

  //End event handler
}


function DrawWhite() {
  var ref = document.getElementById("MainCanvas");
  var ctx = ref.getContext("2d");

  ctx.strokeStyle = "rgba(255, 255, 255, 1)";
  ctx.fillStyle = "rgba(255, 255, 255, 1)";
  ctx.lineWidth = 1;

  //ctx.beginPath();
  //ctx.moveTo(60, 60);
  //ctx.lineTo(60, 120);
  //ctx.lineTo(120, 120);
  //ctx.lineTo(120, 60);
  //ctx.lineTo(60, 60);
  //ctx.stroke();

  ctx.strokeRect(60, 60, 60, 60);

  //End event handler
}

function init() {
  var ref = document.getElementById("Test1");

  ref.onclick = DrawRed;

  ref = document.getElementById("Test2");

  ref.onclick = DrawWhite;

}

init();

DrawWhite();

<canvas width="600" height="600" id="MainCanvas" style="position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 1);">
    </canvas>
<br>

<div style="position: absolute; top: 100px; left: 800px;">

  <button type="button" id="Test1">Test 1</button>

  <button type="button" id="Test2">Test 2</button>

</div>

即使我按照上面指定的那样显式设置了颜色，但2d上下文函数也不呈现指定的颜色。有人可以解释为什么会这样吗？

在两种情况下，观察到相同的现象。一是使用ctx.lineTo（）绘制矩形（在上面已注释掉该选项），二是使用ctx.strokeRect（）绘制矩形。两者都提供相同的异常结果。

以上结果是通过在Windows 7下运行的Chrome版本71.0.3578.98（官方内部版本）（64位）和Firefox Quantum 61.0.2（64位）获得的。

欢迎所有允许我正确指定实际显示颜色的信息。