html5 canvas moving an images gives a trail

Question

I'm learning Html5 so, please, forgive me.

I'm trying to show an image on another one depending on the mouse position, but when I move the mouse the moved image leaves a trail. There was another one who asked a similar question but I didn't succeed to understand the solution :((( Besides, I've put the code on JSFiddle: http://jsfiddle.net/NinoV/sV522/5/ but it doesn't work:(

Can anyone help me?

  <!DOCTYPE html> 
  <html> 
  <head> 
  <title>Prova</title>
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">   </script>    
  </head>
     <script type="text/javascript">
  window.addEventListener('load', init, false);

  var canvas;
  var ctx;
  var canvasX;
  var canvasY;
  var mouseIsDown = 0;
  var move = "";
  var prevX;
  var prevY;
  function init() {
    canvas = document.getElementById("canvas");
     ctx = canvas.getContext("2d");
     cursore = new Image();
     cursore.src ='http://placekitten.com/g/50/50';    
     canvas.addEventListener("mousedown",mouseDown, false);
     canvas.addEventListener("mousemove",mouseXY, false);
     document.body.addEventListener("mouseup", mouseUp, false);
  }


  function draw() {
     var ctx = document.getElementById('canvas').getContext('2d');
     var img = new Image();
     var bao = new Image();
     bao.src ='http://placekitten.com/g/480/390';            
     bao.onload = function(){           
        ctx.drawImage(bao,0,0);
    };
  }

  function kete(n,x,y){
     var centerX = x / 2;
     var centerY = y / 2;
     var radius = 55;
     ctx.clearRect(prevX - radius, prevY - radius, radius * 2, radius * 2);
     //ctx.clearRect(prevX, prevY, radius, 0, 2 * Math.PI, false);      
     y=1;
     ctx.beginPath();
     ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
     ctx.lineWidth = 5;
     ctx.strokeStyle = '#003300';
     ctx.stroke();
     prevX=centerX;
     prevY=centerY;
  }

  function mouseUp() {
     mouseIsDown = 0;
     mouseXY();
  }

  function mouseDown() {
     mouseIsDown = 1;
     mouseXY();
  }

  function mouseXY(e) {
     e.preventDefault();
     canvasX = e.pageX - canvas.offsetLeft;
     canvasY = e.pageY - canvas.offsetTop;
     showPos();
  }

  function showPos() {

     ctx.font="12px Arial";
     ctx.textAlign="center";
     ctx.textBaseline="bottom";
     ctx.fillStyle="rgb(0,0,0)";
     if (mouseIsDown) str = str + " down";
     if (!mouseIsDown) str = str + " up";
     ctx.clearRect(0,390, canvas.width,canvas.height);
     if (canvasY>=201 && canvasY<=253) move = "A";
     if (canvasY>=254 && canvasY<=309) move = "B";

     if (canvasY>=88 && canvasY<=140) move = "b";
     if (canvasY>=141 && canvasY<=196) move = "a";
     if ((canvasX>=17 && canvasX<=444) && (canvasY>=88 && canvasY<=309)){
        //cursore.clearRect(prevX,prevY, cursore.width,cursore.height);
        ctx.drawImage(cursore,canvasX,canvasY);
        prevX=canvasX;
        prevY=canvasY;
     }else{
        move = canvasX+", "+canvasY;
     }
     ctx.fillText(move, canvas.width-50, canvas.height-50, canvas.width-10);
  }
  </script>
  </head> 

  <body  onload="draw();">
  <canvas id="canvas" width="480" height="500" style="background-color:white">
  Sorry, your browser doesn't support canvas technology
  </canvas>
  </body>
  </html>

score 1 · Answer 1 · answered Dec 06 '12 at 18:46

There are several problems with your code, some of them caused by not understanding JSFiddle.

First, remove all the external references in JSFiddle. You're not using two of them and the other one is added by JSFiddle anyway.

All the code you added in the JSFiddle JavaScript box will execute in the load event in JSFiddle, so instead of doing this at the start:

window.addEventListener('load', init, false);

Just do this at the end:

init();

Next, you have nowhere in your code defined str so these lines fail:

 if (mouseIsDown) str = str + " down";
 if (!mouseIsDown) str = str + " up";

Just remove them.

Finally, the reason you see a trail is because you're not removing the image before drawing it again. Once you've drawn stuff on the canvas it stays there until you explicitly clear it. Although you have a call to clearRect, it's only clearing the bottom ten pixels of the canvas:

ctx.clearRect(0,390, canvas.width,canvas.height);

Change it to this and it will clear the whole canvas:

ctx.clearRect(0,0, canvas.width,canvas.height);

Here is a working version.

html5 canvas moving an images gives a trail

1 Answers1