Протрите холст при перетаскивании HTML5

Question

Я нигде не нашел ответа на этот вопрос. Возможно ты можешь помочь мне. Я рисую диаграмму в canvas и div (canvas:chart.js / div:morris.js). Я просто устанавливаю элементы drag&drop с помощью HMTL5, он работает нормально, но когда я перемещаю холст, он стирает все на нем. На карте DIV остаются, но с холстом нет. Есть ли решение кроме перерисовки каждый раз, когда я перемещаю холст?

Спасибо за помощь

редактировать: образец кода

<article class="widget" draggable="true">
    <header>
    </header>
    <canvas class="canvas-container"></canvas>
</article>

<article class="widget" draggable="true">
    <header>
    </header>
    <div class="canvas-container"></div>
</article>

Answer 1

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

Например, учитывая некоторые элементы HTML:

<canvas id="sourceCanvas" width=300 height=300></canvas>

<img id="theCopy">

<canvas id="destinationCanvas" width=300 height=300></canvas>

Код для копирования содержимого холста html в элемент изображения:

// This code will set the source of that img element to be the canvas image

var canvas=document.getElementById("sourceCanvas");
var ctx=canvas.getContext("2d");

document.getElementById('theCopy').src=canvas.toDataURL();

Код для копирования содержимого холста html в другой элемент холста html:

var source=document.getElementById("sourceCanvas");

var destination=document.getElementById("destinationCanvas");
var destinationContext=destination.getContext("2d");

destinationContext.drawImage(source,0,0);

Демонстрация: http://jsfiddle.net/m1erickson/6yvXb/