How to move a circle from a canvas with the mouse (when it's hold)?
<p>I have this problem, and I don't know how to deal with it. 
I struggled almost 2 hours to fix it. I tried various methods, but with no luck. If it's a nobbish question please forgive me and explain me in depth every step you do.</p>

<p>I have created a canvas, and I drew a circle in it. Now, I want to move the circle with the mouse, but while the mouse <strong>is hold</strong>. Is there any way to do it, or I'm just wasting time?
Here is the code:</p>

<pre><code>&lt;canvas draggable="true" id="canv" name="canv" width="600" height="500" style="border:1px solid #000000;" onclick=""&gt;Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt; &lt;!-- &lt; -- the canvas --&gt;

&lt;script&gt;

var canv = document.getElementById("canv");
var context = canv.getContext("2d");

var width = canv.offsetWidth-1;
var height = canv.offsetHeight-1;

context.beginPath();
context.arc(width/2, height/2, 75, 0, 2*Math.PI);
context.stroke();

&lt;/script&gt;
</code></pre>

<p>Some methods I have tried. These one are left in remarks /**/. Other ones I deleted them.</p>

<p><strong>1.</strong></p>

<pre><code>&lt;canvas draggable="true" id="canv" name="canv" width="600" height="500" style="border:1px solid #000000;" onclick="circle_move()"&gt;&lt;/canvas&gt;

function circle_move(event){

    var x = event.clientX;
    var y = event.clientY;

    document.getElementById("txt").setAttribute("value", "X: "+x+" and Y: "+y);

    document.getElementById("canv").addEventListener("onmousemove", function(){
        context.beginPath();
        context.clearRect(0, 0, width, height);
        context.arc(x, y, 75, 0, 2*Math.PI);
        context.stroke();
    });
}
</code></pre>

<p><strong>2.</strong></p>

<pre><code>document.getElementById("canv").addEventListener("mousedown", 
    function(event){
        var x = event.clientX;
        var y = event.clientY;

        document.getElementById("txt").setAttribute("value", "X: "+x+" and Y: "+y);

        context.beginPath();
        context.clearRect(0, 0, width, height);
        context.arc(x, y, 75, 0, 2*Math.PI);
        context.stroke();
    }
);
</code></pre>

<p><strong>3.</strong></p>

<pre><code>&lt;canvas draggable="true" id="canv" name="canv" width="600" height="500" style="border:1px solid #000000;" onmousedown="launch"&gt;&lt;/canvas&gt;

function loop(event){
    var x = event.clientX;
    var y = event.clientY;

    document.getElementById("txt").setAttribute("value", "X: "+x+" and Y: "+y);

    context.beginPath();
    context.clearRect(0, 0, width, height);
    context.arc(x, y, 75, 0, 2*Math.PI);
    context.stroke();
}

function launch(event){
    loop();
    if(event.which !== 1 || event.which !== 2 || event.which !== 3){
        launch(event);
    }   
}
</code></pre>