Javascript HTML画布意外更改颜色

我正在尝试用HTML画布制作一个网格。我已经编写了以下代码。一开始一切正常，但一旦调整窗口大小，网格线的颜色就会因某种原因而改变颜色

如果无法重现该行为

var canvas=document.querySelector（'canvas'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var ctx=canvas.getContext（'2d'）；
addEventListener（'resize'，function（））{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
});
var xOffset=0；
var yOffset=0；
var-gridSize=75；
ctx.lineWidth=2；
函数绘图（）{
ctx.fillStyle='#e8e8e8'；
ctx.fillRect（0，0，window.innerWidth，window.innerHeight）；
ctx.strokeStyle='#7a7f7e'；
ctx.beginPath（）；
ctx.moveTo（0,0）；
对于（变量i=0；i
我认为解决方案是在requestAnimationFrame内移动ctx.lineWidth=2。当我手动更改宽度时，我会看到相同的行为，即默认线宽。下面是解决您问题的工作小提琴：


我认为这种行为是故意的。因此，要获得线宽，您可能需要求助于save（）restore（）

function draw() {

  ctx.fillStyle = '#e8e8e8';
  ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
 ctx.lineWidth = 2;
......