How to remove the previous canvas?

Question

How to remove the previous canvas?

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

What happens is that I get the hora in a función and I update it every 1 second with a setInterval , and the drawing in a canvas with fillText .

The problem is that the previous time is not deleted, so 2:50:30 is seen above of 2:50:29 , please execute the snippet.

What should I do to delete the previous one?

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>

javascript canvas

asked by Eduardo Sebastian 19.07.2017 в 08:51

source

2 answers

Foreign key empty (no data) PHP Errors when compiling using Ahead of Time

score 0 · Answer 1

A simple solution is to fill the canvas with the same background color on each call to the function, so paint on the color of the canvas as if it had been erased.

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();
                
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(0,0,c.width,c.height);
                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>

score 0 · Answer 2

One solution would be to use clearRect()

The CanvasRenderingContext2D.clearRect() method of the Canvas 2D API sets all the pixels in the rectangle defined by the starting point (x, y) and the size (width, height) in transparent black, erasing any previously drawn content.

Syntax
void ctx.clearRect(x, y, width, height);

Example:

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
setInterval(hora, 1000);

function hora() {

  var 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;
  var horafinal = h + ":" + m + ":" + s;
  console.log(horafinal);
  
  // Limpiamos el canvas antes de volver a dibujar
  ctx.clearRect(0, 0, ctx.canvas.offsetWidth, ctx.canvas.offsetHeight);
  
  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>