lo que sucede es que obtengo la hora
en una función
y la actualizo cada 1 segundo con un setInterval
, y la dibujo en un canvas con fillText
.
El problema es que la hora anterior no se borra , osea 2:50:30
se ve encima de 2:50:29
, por favor ejecutar el snippet.
Qué debo hacer para eliminar el anterior?
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
setInterval(hora, 1000);
function hora() {
f = new Date();
h = f.getHours();
m = f.getMinutes();
s = f.getSeconds();
if(h < 10) h = "0" + h;
else h = h;
if(m < 10) m = "0" + m;
else m = m;
if(s < 10) s = "0" + s;
else s = s;
horafinal = h + ":" + m + ":" + s;
console.log(horafinal);
ctx.fillStyle = "#111";
ctx.font="20px Monospace";
ctx.fillText(horafinal, 0,20);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas width="100%" height="100%" id="canvas"></canvas>
</body>
</html>