Vorrei realizzare un orologio analogico. Usando Canvas, ho iniziato con la lancetta dei secondi, disegnandola e poi cancellando l'immagine precedente disegnandola usando il colore dello sfondo.
Ma l'immagine cancellata usando il colore dello sfondo, non scompare completamente, forse perché i colori si sovrappongono. Cosa si deve fare per far scomparire completamente l'immagine precedente? Grazie

lanvoel

codice:
<!doctype html>
<HTML>
<body>
<canvas id="lavagna" width="400" height="400" style="border:1px solid black; "background-color:white"></canvas></p>
<script> 
  var c = document.getElementById('lavagna');
  const Ox=c.width/2;   //ascissa origine
  const Oy=c.height/2;  //ordinata origine
  const u = 20;         //unità di misura
  var ctx=c.getContext("2d");
 //TRASLAZIONE
 ctx.translate(Ox,Oy);
ctx.beginPath();
    ctx.arc(0,0, 10*u, 0, 2*Math.PI);
    ctx.stroke();
for(ag=0; ag<=360; ag=ag+6)
{
ctx.moveTo(9.3*u*Math.cos(ag*Math.PI/180),9.3*u*Math.sin(ag*Math.PI/180));
ctx.lineTo(10*u*Math.cos(ag*Math.PI/180),10*u*Math.sin(ag*Math.PI/180));
if(ag%5==0){
           ctx.moveTo(8.7*u*Math.cos(ag*Math.PI/180),8.7*u*Math.sin(ag*Math.PI/180));
           ctx.lineTo(10*u*Math.cos(ag*Math.PI/180),10*u*Math.sin(ag*Math.PI/180));
           }
ctx.stroke();
}
var ag=0;
var agm;
avvia();
function avvia()
{
secondi1=window.setInterval("secondi()",1000);
}
function secondi()
{
ctx.beginPath();
           ctx.strokeStyle="white";
           ctx.moveTo(0,0);
           ctx.lineTo(8.5*u*Math.cos(ag),8.5*u*Math.sin(ag));
           ctx.stroke();
           ag=ag+Math.PI/30;
           agm=ag;
ctx.beginPath();
           ctx.strokeStyle="black";
           ctx.moveTo(0,0);
           ctx.lineTo(8.5*u*Math.cos(agm),8.5*u*Math.sin(agm));
           ctx.stroke();         
}
</script>
</body>
</html>