Jak przeciągnąć płótno z "klonem" pomocnika?

Question

Mam proste HTML płótno

<div class='circle'> 
    <canvas id="myCanvas" width="100" height="100">Your browser does not support the HTML5 canvas tag.</canvas> 
</div> 

stylu

.circle { 
    height: auto; 
    width: auto; 
} 

i skrypt

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(50, 50, 50, 0, 2 * Math.PI); 
ctx.fill(); 

$('.circle').draggable({ 
    helper: 'clone' // Remove this line to make it draggable 
}); 

Wydaje się, że nie mogę korzystać z opcji pomocnika, gdzie chcę, aby zachować kopię okrąg w oryginalnej pozycji, gdy go przeciągam. Funkcja przeciągania działa tylko wtedy, gdy usunę opcję pomocnika. Zdarzyło się to tylko na płótnie, a nie gdy rysowałem okrąg za pomocą css. Fiddle to here. Dzięki!

Answer 1

Niestety kiedy sklonować elementu canvas, to nie skopiować danych obrazu. Zamiast tego możesz wyeksportować swoje dane obszaru roboczego jako adres danych i sklonować obraz.

Fiddle: http://jsfiddle.net/gwwar/Bdpq9/2/

<div class='circle'> 
</div> 

var c = document.createElement("canvas"); 
var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(50, 50, 50, 0, 2 * Math.PI); 
ctx.fill(); 
var url = c.toDataURL(); 
var img = document.createElement("img"); 
img.setAttribute("src",url); 
$(".circle").append(img); 

$('.circle').draggable({ 
    helper: 'clone' // Remove this line to make it draggable 
}); 

Answer 2

Dzieje się tak dlatego, że klonowanie polega tylko na klonowaniu płótna, a nie jego zawartości (płótno jest w tym względzie szczególnym elementem). Możesz zobaczyć dowód na to przez marking the canvas.

Będziesz musiał przerysować zawartość z oryginalnego płótna na sklonowanego przykład:

/// you need to get these objects in advance, then: 
clonedContext.drawImage(originalCanvas, 0, 0);