уже просмотрел по фабрику все минуалы но мозгов не хватает - обьясняю как работает - есть два холста js-left-canvas-wrapper и js-right-canvas-wrapper ) структура след -
<div class="canvas-container" style="width: 420px; height: 600px; position: relative; -moz-user-select: none;"><canvas id="js-left-canvas" data-page-id="1" width="420" height="600" class="ui-droppable lower-canvas" style="position: absolute; width: 420px; height: 600px; left: 0px; top: 0px; touch-action: none; -moz-user-select: none;">Обновите браузер</canvas>
<canvas class="upper-canvas ui-droppable" style="position: absolute; width: 420px; height: 600px; left: 0px; top: 0px; touch-action: none; -moz-user-select: none; cursor: default;" width="420" height="600"></canvas></div>
это левый холст - при загрузке страници он не активен и становится такой после того как я на него тыкну и также с правым
<img class="canvas-image" id="js-left-canvas-img" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD(тут идет отрисовка )" >
- тут идет отрисовка ,элемент изначально none и всегда такой ) при рисовании этот img берется и канвас его берет и себе фоном ставит )так же и с правим холстом )
если мы идем дальше и выбираем холсты 1 - 2 -3 -4 -5 -6 - и так далее ))просто поставляется свой имг
так же вот код где вся логика -
https://jsfiddle.net/sergey1998181/y7s0qeaw/ 
