Clearing context in canvas html5

Question

I want to draw a photo in a canvas and allow the user to drag a circle over it. I'm able to do it. The problem is when I clear context, the image I had drawn is gone (see here: http://jsfiddle.net/wL0ossth/ ) and if don't clear context the whole image is being filled with coloured circles (see here: http://jsfiddle.net/wL0ossth/1/ ). Some code:

<canvas id="canvas" width=300 height=300></canvas>
    <img id="scream" src="http://i10.dainikbhaskar.com/thumbnail/655x588/web2images/www.bhaskar.com/2014/11/25/2324_bus.jpg" alt="The Scream" width="220" height="277">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

JavaScript: ' http://jsfiddle.net/wL0ossth/1/

var c=document.getElementById("canvas");
     var img=document.getElementById("scream");  
     var ctx=c.getContext("2d");
     ctx.drawImage(img,10,10); 
 canvas.addEventListener('mousemove', followMouse, false);  

function findOffset(obj) {
    var curX = curY = 0;
    if (obj.offsetParent) {
        do {
            curX += obj.offsetLeft;
            curY += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return {x:curX,y:curY};
    }
}

function followMouse(e){


    ctx.beginPath();
    var offset = findOffset(canvas);   //get the offset of the canvas relative to the page

    var posX = e.pageX - offset.x;     //find the x position of the mouse
    var posY = e.pageY - offset.y;     //find the y position of the mouse

    ctx.arc(posX,posY,50,0,Math.PI*2,false);   //draw a circle
    ctx.fill(); 
}

Edited: I want to make the circle movable with cleared context along with image I drew. In short, a circle without leaving blackish trail in path as is drawn in http://jsfiddle.net/wL0ossth/1/

Answer 1

I think you want something like this (although I'm not sure unless you clarify your post a bit):

 $(document).ready(function() { var c = document.getElementById("canvas"); var img = document.getElementById("scream"); var ctx = c.getContext("2d"); canvas.addEventListener('mousemove', followMouse, false); function findOffset(obj) { var curX = 0, curY = 0; if (obj.offsetParent) { do { curX += obj.offsetLeft; curY += obj.offsetTop; } while (obj = obj.offsetParent); return { x: curX, y: curY }; } } function followMouse(e) { ctx.clearRect(0, 0, 300, 300); ctx.drawImage(img, 10, 10); // Notice I moved the image down to here ctx.beginPath(); var offset = findOffset(canvas); //get the offset of the canvas relative to the page var posX = e.pageX - offset.x; //find the x position of the mouse var posY = e.pageY - offset.y; //find the y position of the mouse ctx.arc(posX, posY, 50, 0, Math.PI * 2, false); //draw a circle ctx.fill(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="canvas" width=300 height=300></canvas> <img id="scream" src="http://i10.dainikbhaskar.com/thumbnail/655x588/web2images/www.bhaskar.com/2014/11/25/2324_bus.jpg" alt="The Scream" width="220" height="277"> 

What you need to do is put drawImage(img) after the clearRect . That way every time the canvas is cleared, the image is drawn again.