Холст слои и позиционирование

Question

у меня трудное время на выяснение того, как я должны сделать для того, чтобы установить правильный размер для следующих полотен

<div id="canvasesdiv" style="height: 100%; width: 100%; display: table-cell; position: relative; width:578px; height:415.5px"> 
    <canvas id="c1"  style="z-index: 1; position:absolute; left: 80px; width="680" height="435"></canvas> 
    <canvas id="c2"  style="z-index: 2; position:absolute; left: 80px; width="680" height="435"></canvas> 
    <canvas id="c3"  style="z-index: 3; position:absolute; left: 80px; width="680" height="435"></canvas> 
    <canvas id="c4"  style="z-index: 4; position:absolute; left: 80px; width="680" height="435"></canvas> 
    <canvas id="c5"  style="z-index: 5; position:absolute; left: 80px; width="680" height="435"></canvas> 

Клиря ширина и высота обрабатываются неправильно (html ожидает: и значения в px), но каким-то образом холсты рисуются в полном объеме. Вместо этого, если я использовать что-то вроде:

<canvas id="c1"  style="z-index: 1; position:absolute; left: 80px; "></canvas> 
    <canvas id="c2"  style="z-index: 2; position:absolute; left: 80px; "></canvas> 
    <canvas id="c3"  style="z-index: 3; position:absolute; left: 80px; "></canvas> 
    <canvas id="c4"  style="z-index: 4; position:absolute; left: 80px; "></canvas> 
    <canvas id="c5"  style="z-index: 5; position:absolute; left: 80px; "></canvas> 

или

... width: 500px; height: 500px;" 

Полотна все не обрезается до 300x150 (хром по умолчанию), независимо от того, что.

Проблема в том, что положение: абсолютное значение является обязательным для того, чтобы иметь слои. Как я могу сделать, чтобы определить измерение без разрушения качества холста и сделать его таким, чтобы он оставался в данной границе?

Посмотрите на этот пример, можете ли вы исправить его так, чтобы позиция была абсолютной, но размер был тем, что вы хотите и центрировали? See here.

Если я добавлю положение: абсолютное, наложение работает, но оно выходит за пределы div, see here.

Answer 1

Вы вставляете HTML width и height атрибуты в style атрибуты, которые должны держать css. Если вы проверите инструменты dev, вы увидите, что релевантные правила пробиты. Просто используйте css для их стилизации. Еще лучше, если поместить их в <style/> тег или во внешней таблице стилей

Не хорошо:

<canvas style="... width="680" height="435"></canvas> 

Хорошо:

<canvas style="... width: 680px; height: 435px;"></canvas> 

Или: просто закрыть двойные кавычки, и использовать атрибуты в любом случае (хотя css является лучшим решением)