HTML-холст неожиданно изменил цвет

Question

Я пытаюсь сделать сетку с помощью HTML canvas. Я написал следующий код. Сначала все работает правильно, но как только размер окна изменяется, цвет линий сетки почему-то меняет цвет.

Если вы не можете воспроизвести поведение, здесь видео о поведении .

var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext('2d');

window.addEventListener('resize', function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

var xOffset = 0;
var yOffset = 0;
var gridSize = 75;

ctx.lineWidth = 2;

function draw() {

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

  ctx.strokeStyle = '#7a7f7e';
  ctx.beginPath();
  ctx.moveTo(0, 0);
  for (var i = 0; i < window.innerWidth + gridSize; i += gridSize) {

    ctx.moveTo(i + xOffset % gridSize, 0);


    ctx.lineTo(i + xOffset % gridSize, window.innerHeight);
  }

  for (var i = 0; i < window.innerHeight + gridSize; i += gridSize) {


    ctx.moveTo(0, i + yOffset % gridSize);

    ctx.lineTo(window.innerWidth, i + yOffset % gridSize);
  }
  ctx.stroke();

  window.requestAnimationFrame(draw);
}

window.requestAnimationFrame(draw);

<canvas></canvas>

Answer 1

Я думаю, что решение состоит в том, чтобы переместить ctx.lineWidth = 2 внутри requestAnimationFrame. Когда я изменяю ширину вручную, я вижу то же самое поведение, ширина линии по умолчанию. Итак, вот рабочая скрипка, которая решает вашу проблему:

https://jsfiddle.net/ibowankenobi/skgn9q51/2/

function draw() {

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

Я думаю, что это поведение предназначено. Поэтому, чтобы получить значение lineWidth, вам может потребоваться прибегнуть к save () restore ();