Почему HTML5 Canvas большего размера растягивает нарисованную линию?

Question

Я использую HTML5 <canvas> для рисования линий.

Когда я изменяю размеры по умолчанию 300x150, чтобы соответствовать размерам другого <div>, мои линии выглядят растянутыми и толще, чем раньше. Почему это происходит?

Я хочу нарисовать линии на холсте, чтобы они соответствовали положению элементов на <div> перед ним (с более высоким z-index) в той же позиции на странице. Как я могу предотвратить это растяжение?

РЕДАКТИРОВАТЬ: Это, кажется, только в Firefox.

Answer 1

Вы не можете изменить размер холста с помощью CSS. Если вы сделаете это, оно будет вести себя как изображение и будет растягиваться. Вы должны сделать это в javascript со свойствами canvas. Canvas.width, canvas.height