Какие единицы измерения используются в canvas при рисовании линий?

Question

[GAS-ART]

Есть условный canvas размером 500 на 500 пикселей. Хочу при наведении мыши нарисовать прямую линию в самом низу на всю длину холста.
использую следующий код:

const canvas = document.getElementById('canvas');

      canvas.addEventListener('mouseover', function () {
         let context = this.getContext('2d');
         context.beginPath();
         context.moveTo(0, 500); // должен переместиться на 500px вниз
         context.lineTo(500, 500); // должен нарисовать линию длинной в 500px
         context.stroke();
         context.closePath();
      });

Но оказывается что значения методов moveTo() и lineTo() не подходят, они слишком большие. Линя внизу получается если я использую такие значения:

context.moveTo(0, 150);
         context.lineTo(300, 150);

Соответственно получается что он считает не в px а в каких то других единицах измерения, хотя на многих ресурсах написано что должен считать именно в px.
Ну собственно вопрос, в каких единицах идет расчет?
jsfiddle прилагаю:
https://jsfiddle.net/wcbsf6xr/21/

Comments

[RAX7]

Линя внизу получается если я использую такие значения

Потому что по умолчанию размер канваса 300x150px
Начни читать от сюда и поймешь, как работать с канвасом
https://developer.mozilla.org/ru/docs/Web/API/Canv...

Answer 1

[SagePtr]

Потому что размер canvas не 500 х 500, это браузер применяет к нему стили CSS и растягивает на экране до нужного размера. Чтобы изменить физический размер canvas, нужно задать ему атрибуты width и height (можно в html-коде, а можно и в рантайме).
(предвижу следующий вопрос: чтобы линия 1px попала в пиксельную сетку - её координаты должны быть со сдвигом в 0.5 пикселей)

Comments

[GAS-ART]

Про canvas понял, спасибо большое! по поводу пиксель сетки понял только что надо смещать, но не совсем ясно с чем связано необходимость этого смещения.
Прописал так (и все очень четко работает):

<canvas width='500.5' height="500.5" id="canvas"></canvas>

const canvas = document.getElementById('canvas');

      canvas.addEventListener('mouseover', function () {
         let context = this.getContext('2d');
         context.beginPath();
         context.moveTo(0, 499);
         context.lineTo(500, 499);
         context.stroke();
         context.closePath();
      });

[SagePtr]

Артем, размеры должны быть целые, это координаты - со сдвигом, т.к. мы указываем координаты середины точек.

[GAS-ART]

Ага, понял, спасибо!