Gavr_Gavr
@Gavr_Gavr

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

Есть условный 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/
  • Вопрос задан
  • 312 просмотров
Решения вопроса 1
SagePtr
@SagePtr
Еда - это святое
Потому что размер canvas не 500 х 500, это браузер применяет к нему стили CSS и растягивает на экране до нужного размера. Чтобы изменить физический размер canvas, нужно задать ему атрибуты width и height (можно в html-коде, а можно и в рантайме).
(предвижу следующий вопрос: чтобы линия 1px попала в пиксельную сетку - её координаты должны быть со сдвигом в 0.5 пикселей)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы