как перемещать холст вместе с центрированным холстом

Question

Итак, у меня есть 2 холста - один большой и один маленький, который находится на большом. Мой вопрос в том, как самый простой и лучший способ сосредоточить большой холст и переместить маленькую с ним, чтобы он мог снова оказаться в левом верхнем углу, как прежде, чтобы центрировать основной холст.

Это мой код:

HTML:

<div id="canvas-container"> 
    <canvas id="projectGame" width="800" height="800"></canvas> 
    <canvas id="popUp" width="150" height="200"></canvas> 
</div> 

CSS:

#canvas-container { 
     position: relative; 
} 
#projectGame { 
     position: absolute; 
     border: 1px solid #000000; 
     margin-left: auto; 
     margin-right: auto; 
     left: 0; 
     right: 0; 
     z-index: 3; 
} 

#popUp { 
     position: absolute; 
     z-index: 4; 
     border: 5px solid #000000; 
} 

Заранее спасибо :)

Answer 1

Во-первых, поставить ширину и высоту на контейнере :

#canvas-container { 
     position: relative; 
     width: 800px; 
     height: 800px; 
} 

<div id="canvas-container"> 
    <canvas id="projectGame"></canvas> 
    <canvas id="popUp" width="150" height="200"></canvas> 
</div> 

затем сделать основной холст 100% емкости:

#projectGame { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     border: 1px solid #000000; 
     margin-left: auto; 
     margin-right: auto; 
     left: 0; 
     right: 0; 
     z-index: 3; 
} 

Затем установите всплывающий топ-влево, где вы хотите его relativly:

#popUp { 
    position: relative; 
    top: 150px; 
    left: 150px; 
    z-index: 4; 
    border: 5px solid #000000; 
} 

Теперь переместите весь контейнер, когда вы хотите перемещать/центрировать/всевозможные холсты вместо того, чтобы просто перемещать/центрировать один холст.