Help with rendering ODA actions on canvas using fabric?

Question

JavaScript

I have already looked at the factory all the minis but there are not enough brains - I explain how it works - there are two canvases js-left-canvas-wrapper and js-right-canvas-wrapper ) structure trace -

<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>

this is the left canvas - when the page loads, it is not active and becomes like this after I click on it and also with the right one

<img class="canvas-image" id="js-left-canvas-img" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD(тут идет отрисовка )" >

- here comes the rendering, the element is initially none and always like this) when drawing this img is taken and the canvas takes it and puts it in the background) the same with the canvas)
if we go further and select canvases 1 - 2 -3 -4 -5 - 6 - and so on)) just comes with its img
, so here is the code where all the logic is - https://jsfiddle.net/sergey1998181/y7s0qeaw/