Почему canvas не масштабируется?

Question

[marsel81]

Пробовал изменить размер canvas, но не видно некоторой части моей работы
jsfiddle.net/m7yok10p

т.к там image, то лучше открыть на пк

Answer 1

[profesor08]

Растяни canvas на css на всю высоту и ширину контейнера, потом программно задай высоту и ширину.

canvas {
  width: 100%;
  height: 100%;
}

function resize() {
  canvas.width = canvas.offsetWidth;
  canvas.height= canvas.offsetHeight;
}

Далее рисовать можешь двумя способами, либо попиксельно, либо с учетом масштаба, который вычисляешь.

Еще можешь задать для canvas фиксированный размер, а на css растянуть на весь контейнер. Тогда он как картинка будет масштабироваться.

Comments

[marsel81]

если я делаю по центру, то она тоже урезается немного

[profesor08]

marsel81, если урезается, значит ты косячишь когда рисуешь что-то. Ты сдвинул центр круга, но радиус круга больше сдвига. Чего ты ожидал в этом случае? Что написал то и нарисовалось.

https://jsfiddle.net/profesor08/cyhvsbwj/