Изменение размера холста HTML5 до родительского

Я хочу изменить размер элемента canvas, чтобы он соответствовал его родительскому объекту, например, <body> ( "полноэкранный" ) или некоторая <div>. Это моя попытка:

// called at each frame
function update() {
    var canvasNode = document.getElementById('mycanvas');
    canvasNode.width = canvasNode.parentNode.clientWidth;
    canvasNode.height = canvasNode.parentNode.clientHeight;
}

По какой-то причине холст не перестает расти! Может быть, client* не являются правильными параметрами?

Смотрите действующий код: http://jsfiddle.net/ARKVD/24/

Ответы

Ответ 1

Самый простой способ - сохранить холст в своем собственном div.

Единственное, что когда-либо будет в этом div, - это холст.

Затем вы можете использовать CSS для изменения размера div, но вы хотите. Вы хотите, чтобы он был таким же большим, как тело? Дайте div width: 100%.

Тогда вы всегда можете сделать это правильно:

canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;

Если вы это сделаете, вам не придется беспокоиться о странных проблемах, с которыми вы сталкиваетесь сейчас, когда тело является прямым родителем div.

Ответ 2

Я обнаружил, что самый чистый подход состоит в том, чтобы просто "напомнить" о элементе canvas, насколько он должен быть при изменении размера:

window.onresize = function () {
    canvas.style.width = '100%';
    canvas.height = canvas.width * .75;
}

Установка высоты в этом случае - это просто поддерживать соотношение 4: 3. Вы можете, конечно, сделать это на 100%, если хотите.

Ответ 3

Я нашел ту же самую проблему, и единственный способ, которым я мог ее найти, - установить высоту холста на parentHeight - 1. Это было использование CEF. В this fiddle мне пришлось установить его в parentHeight - 5.

canvasNode.height = div.clientHeight - 5;

Ответ 4

Вы можете решить эту проблему, нарушив круговую зависимость между родительским node и дочерним node. Распределение размеров элементов DOM должно распространяться только сверху вниз (от родителя к дочернему). Вы можете гарантировать, что дочерний элемент (холст) не влияет на размер родителя, установив

canvasNode.style.position = 'absolute';

Это помещает его в свой собственный поток документа, который не зависит от родителя.