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

Stage предлагает toImage и toDataURL для захвата контента, однако, согласно этому тесту производительности, оба эти метода будут очень медленными по сравнению с context.drawImage.

Увидеть:http://jsperf.com/copying-a-canvas-element

Поскольку на сцене я использую только один слой, а слой содержит холст, я подумал, что смогу сделать это:

desticationCtx.drawImage(layer.getContext().canvas, 0,0);

к сожалению, это нене дает никаких результатов (хотя работает)

Так как на стадии есть bufferCanvas, я также попробовал:

destinationCtx.drawImage(this.stage.bufferCanvas.element,0,0);

Опять нет результатов, хотя я могу видеть содержание на холсте сцены на странице.

Однако, если я покопаюсь на своей странице, чтобы добраться до реального холста, созданного и использованного kineticjs:

destinationCtx.drawImage(document.getElementById('mydiv').children[0].children[0],0,0);

Я получаю результаты. Как правильно скопировать содержимое сцены kineticjs на другой холст?