CODEWITHSUNDEEP
javascriptcanvassetinterval
dewwweb
dewwweb

Reputation: 5

update canvas filltext text with setInterval

I designed a counter with canvas.Everything goes fine in design but when I want to change the time number and refresh it by setInterval,filltext start creates over itself and it change it's position. code sample is here:

<canvas id="top-left" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById("top-left");
var ctx = canvas.getContext("2d");
ctx.beginPath();    
ctx.moveTo(canvas.width * 0.97,canvas.height * 0.06);
ctx.lineTo(canvas.width * 0.97,canvas.height * 0.97);
ctx.arc(canvas.width * 0.97,canvas.height * 0.97,canvas.width * 0.91,1*Math.PI,1.5*Math.PI);
ctx.moveTo(canvas.width * 0.97,canvas.height * 0.97);
ctx.lineTo(canvas.width * 0.06,canvas.height * 0.97);
ctx.shadowBlur = canvas.width * 0.016;
ctx.shadowOffsetX = canvas.width * 0.016;
ctx.shadowColor = "#666666";    
ctx.fillStyle = "#98ae32";
ctx.fill();
ctx.lineWidth = canvas.width * 0.01;
ctx.lineCap = "round";
ctx.strokeStyle = "#000000";
ctx.stroke();

var x = 1;  
var c = setInterval(function(){
   ctx.font = canvas.width * 0.273 + "px Baskerville Old Face";
   ctx.fillStyle = "#000000";
   ctx.fillText(x,canvas.width * 0.33,canvas.height * 0.86);   
   x++;
   if(x === 5){
      clearInterval(c);   
   }
},1000);
</script>

I want to know how can I change the filltext text without creating over itself.I just want to update text.Please help me to solve my problem. Thank you

Upvotes: 0

Views: 1093

Answers (1)

Cracker0dks
Cracker0dks

Reputation: 2490

You have to clear and repaint it.

Clear it with: ctx.clearRect(0, 0, canvas.width, canvas.height);

and than do all the things you do out of the intervall inside and update the counter.

Upvotes: 1

Related Questions