सहायक 'क्लोन' के साथ कैनवास कैसे खींचें?

Question

मैं एक साधारण HTML कैनवास है

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

शैली

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

और स्क्रिप्ट के साथ

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

ऐसा लगता है कि मैं सहायक विकल्प का उपयोग नहीं कर सकते हैं जहां मैं की एक प्रति रखना चाहते हैं जब मैं इसे चारों ओर खींचता हूं तो मूल स्थिति में सर्कल। ड्रैगगेबल केवल तभी काम करेगा जब मैं सहायक विकल्प को हटा दूं। यह केवल कैनवास के साथ हुआ, न कि अगर मैं सीएसएस का उपयोग कर सर्कल खींचता हूं। फिडल here है। धन्यवाद!

Answer 1

दुर्भाग्य से जब आप एक कैनवास तत्व क्लोन, इस छवि डेटा की प्रतिलिपि नहीं है। आप इसके बजाय अपने कैनवास डेटा को डेटा यूआरएल के रूप में निर्यात करना चाहते हैं और इसके बजाय छवि को क्लोन करना चाहते हैं।

फिडल: 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

ऐसा इसलिए है क्योंकि क्लोनिंग केवल कैनवास तत्व क्लोन करता है, इसकी सामग्री नहीं (कैनवास इस संबंध में एक विशेष तत्व है)। आप marking the canvas द्वारा इसका सबूत देख सकते हैं।

आप क्लोन उदाहरण पर मूल कैनवास से सामग्री पुनः बनाने की आवश्यकता होगी:

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