¿Cómo elimino el texto del elemento <canvas>?

Question

He puesto texto en una imagen en una etiqueta <canvas> (el texto fue tomado de un cuadro de entrada).

Ahora si pongo un nuevo texto en el <canvas>, se impone en el texto anterior. ¿Cómo elimino el texto existente en el lienzo antes de poner el nuevo texto?

He intentado restablecer el lienzo asignando canvas.width pero el texto permanece activo. ¿Alguna gente de ayuda?

Answer 1

No estoy seguro acerca de cómo borrar el texto de la imagen antes de poner la siguiente parte del texto.

Si el fondo del lienzo es constante; y su único cambio de texto podría superponer dos elementos de lienzo. El fondo y una capa superior transparente para el texto que se puede eliminar y una nueva insertada cuando desea actualizar el texto.

Answer 2

Tendrá que volver a dibujar la imagen antes de dibujar el nuevo texto.

Answer 3

no está seguro de si iba a funcionar, pero usted podría intentar volver a dibujar el texto en el color de fondo

Answer 4

Es necesario utilizar clearRect (x, y, w, h); Más detalles en MDC

Answer 5

Ponga la tela en un otro recipiente div o

<div id=canvasHold><canvas id=myCanvas></canvas></div> 

Claro que el HTML del contenedor

canvasHold.innerHTML="" 

Luego reemplazarlo con un nuevo lienzo.

canvasHold.innerHTML="<canvas id=myCanvas></canvas>" 

Volver a enviar nueva lona con el nuevo texto

Answer 6

Si sabe que va a ser la adición y la eliminación de una gran cantidad de texto, que podría tener sentido para realizar un seguimiento del texto antiguo. Entonces usted podría utilizar esto:

context.fillStyle = '#ffffff'; // or whatever color the background is. 
context.fillText(oldText, xCoordinate, yCoordinate); 
context.fillStyle = '#000000'; // or whatever color the text should be. 
context.fillText(newText, xCoordinate, yCoordinate); 

De esta manera usted no tiene que volver a dibujar todo el lienzo en todo momento.

Answer 7

Usa context.clearRect(), pero primero tienes que encontrar el rectángulo para borrar. Esto se basa en una serie de factores, como el tamaño del texto y la propiedad textAlign del contexto canvas cuando el texto se dibujó originalmente. El código siguiente sería para el método de dibujo de un objeto que dibuja texto en un contexto de lienzo, como tal tiene propiedades para x, y, tamaño de texto, alineación horizontal, etc. Tenga en cuenta que siempre almacenamos la última pieza de texto dibujada para que podamos puede borrar un rectángulo de tamaño apropiado cuando se cambia el valor siguiente.

this.draw = function() { 
    var metrics = this.ctx.measureText(this.lastValue), 
     rect = { 
     x: 0, 
     y: this.y - this.textSize/2, 
     width: metrics.width, 
     height: this.textSize, 
     }; 

    switch(this.hAlign) { 
    case 'center': 
     rect.x = this.x - metrics.width/2; 
     break; 
    case 'left': 
     rect.x = this.x; 
     break; 
    case 'right': 
     rect.x = this.x - metrics.width; 
     break; 
    } 

    this.ctx.clearRect(rect.x, rect.y, rect.width, rect.height); 

    this.ctx.font = this.weight + ' ' + this.textSize + ' ' + this.font; 
    this.ctx.textAlign = this.hAlign; 
    this.ctx.fillText(this.value, this.x, this.y); 
    this.lastValue = this.value; 
} 

Answer 8

Si no puede claros otros dibujos en la misma área del texto, otra solución es tener dos lienzo, una sobre la otra:

<div style="position: relative;"> 
    <canvas id="static" width="1350" height="540" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 
    <canvas id="dynamic" width="1350" height="540" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
</div>  

continuación, puede utilizar el primero para dibujos estáticos que no necesitan ser eliminados, y el otro con dibujos dinámicos. En su caso, puede colocar el texto en el lienzo dinámico y eliminarlo con clearRect antes de dibujar nuevamente.

context.clearRect(0, 0, canvas.width, canvas.height);