CODEWITHSUNDEEP
javascripthtmlanimationraphael
180492
180492

Reputation: 23

JS animation writes over itself instead of replacing

I have this code for a digital clock using Raphaël library which prints over itself instead of replacing itself each time, does anyone know how to edit the code so it replaces instead of writes over?

JS file referenced within HTML file: 

window .onload= function (){
var paper = new Raphael( 0,0, 400, 400);
var backGround = paper.rect(0,0,400,400);
   backGround.attr({ fill: "none"});
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
var dig = h+":"+m+":"+s;
var display = paper.text(200, 200, dig).attr({text:dig});
 }
  function checkTime(i) {
     if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
       return i;
    }
 setInterval(function(){
 startTime();
 },1000);
 };

HTML file: 

<!DOCTYPE html>
<html>
<head>
<script src="digital.js" type="text/javascript"></script>
<script src="raphael-min.js" type="text/javascript"> </script>

</head>

</html>

Thank you

Upvotes: 0

Views: 98

Answers (1)

Mateusz Bartkowski
Mateusz Bartkowski

Reputation: 729

It isn't really an animation, since you are drawing an image of the clock.

What paper.text is doing is drawing a new text every second on the canvas over the text that is already there.

using display.attr('text', dig); instead of you can edit the existing text.

This is the corrected code:

window .onload= function (){
var paper = new Raphael( 0,0, 400, 400);
var backGround = paper.rect(0,0,400,400);
var display = paper.text(200, 200, "00:00:00").attr({text:"00:00:00"});
   backGround.attr({ fill: "none"});
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
var dig = h+":"+m+":"+s;
display.attr('text', dig);
}
function checkTime(i) {
     if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
       return i;
}
setInterval(function(){
  startTime();
},1000);
};

Upvotes: 1

Related Questions