Come trascinare una tela con l'helper "clone"?

Question

Ho una semplice tela HTML

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

con stile

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

e sceneggiatura

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 
}); 

Sembra che non posso utilizzare l'opzione di supporto in cui voglio conservare una copia il cerchio nella posizione originale quando lo trascino in giro. Il draggable funzionerà solo se rimuovo l'opzione helper. Questo è successo solo su tela, non se disegno il cerchio usando css. Fiddle è here. Grazie!

Answer 1

Purtroppo quando si clona un elemento canvas, questo non copiare i dati di immagine. Potresti invece esportare i tuoi dati su tela come URL di dati e clonare invece l'immagine.

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

Questo perché la clonazione clona solo la tela elemento, non il contenuto di esso (la tela è un elemento speciale in questo senso). Puoi vedere la prova di ciò tramite marking the canvas.

Sarà necessario ridisegnare il contenuto dalla tela originale sul istanza clonato:

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