Как изменить расположение iframe и canvas и не перерисовать?
 

Добрый день,

не смог загуглить, подскажите, пожалуйста, куда смотреть.

Имею два объекта

<canvas id="canvas"></canvas>
<iframe></iframe>

в каждом из которых я рисую много чего и время отрисовки играет роль.

Мне хотелось бы дать юзеру возможность по-разному располагать эти объекты на экране, а именно
canvas - слева, а iframe - справа,
canvas - справа, а iframe - слева,
canvas - снизу, а iframe - сверху,
canvas - сверху, а iframe - снизу,
canvas - на полный экран, а iframe - нету,
canvas - нету, а iframe - на полный экран.

Если в canvas я еще как-то что-то могу перерисовать более-менее быстро, в iframe полная перерисовка занимает несколько секунд.

Пока я делал
<div id=main> </div>

и потом втыкал в
document.all('main').innerHTML текст таблицы, в которой мои canvas и iframe2-3 секунды2-3 секунды были расположены как я хотел.

Понятно после изменения расположения мне приходилось полностью заново все перерисовывать.

Скажите, пожалуйста, как это избежать, то есть как таблицу, которая содержит canvas и iframe так видоизменить, что расположение canvas и iframe относительно друг друга изменится, а содержание каждого из этих элементов (canvas и iframe) не изменится?

Спасибо!

Если нельзя просто двигать объекты меняя их стили (left, top), то можно для перемещения удалять элемент из контейнера, но не удаляя его совсем, а потом вставлять в другой контейнер.
let canv = document.getElementById('myCanvas')
canv.remove() // Удаляем cаnvas из старого DIV

let newdiv = doсument.getElementById('newDiv')

newdiv.appendChild (canv) // Вставляем в новый.

И перерисовывать ничего не надо.
Так же думаю и с iframe можно.

Классно, спасибо! Работает!