Почему линии canvas/js нечеткие?

Question

[JyriG]

Нужно создать динамичную сетку координатов на js/canvas.

Такой код:

function draw() {

      var canvas = document.getElementById('canvas');
      if (canvas.getContext) {
        var context = canvas.getContext('2d');

        for(var x=0.5;x<500;x+=10) {
          context.moveTo(x,0);
          context.lineTo(x,500);
        }

        for(var y=0.5; y<500; y+=10) {
          context.moveTo(0,y);
          context.lineTo(500,y);

      }

      context.strokeStyle='grey';
      context.stroke();

  }
}

function showCoords(event) {
    var x = event.clientX - 10;
    var y = event.clientY - 10;
    var coords = "X coordinates: " + x + ", Y coordinates: " + y;
    document.getElementById('showCoords').innerHTML = coords;

  }

с щепоткой кода делает такой вот результат: . Как сделать линии четкими? Библиотеки не используются.

Comments

[Ivan Brezhnev]

Может ретина или hdpi дисплей?

[JyriG]

Ivan Brezhnev, Вроде нет

Answer 1

[Александр]

Размеры canvas через CSS устанавливаете? Надо ещё и в JS ставить.

canvas.width = 500;
canvas.height = 500;

Answer 2

[Alexandroppolus]

Какая толщина линий? Если четная, то не надо 0.5 в координаты