No se puede borrar el lienzo en HTML5

Tengo un par de lienzos en capas en una página HTML, quiero poder cambiar la capa superior, que muestra imágenes que el usuario puede seleccionar.

El problema es que cada vez que llamo a clearRect, borra el lienzo por un momento y luego se vuelve a cargar la imagen anterior.

Este es mi código javascript:

window.onload = function(){
    init();
    drawAll();  
}
function clear(){
    ctx2.clearRect(0,0,WIDTH,HEIGHT);
}

function init() {
    city.src ="city.png";
    image2.src="image.png";
    layer1 = document.getElementById("layer1");
    ctx1 = layer1.getContext("2d");
    layer2 = document.getElementById("layer2");
    ctx2 = layer2.getContext("2d");
}


function drawAll() {
    draw1();
    draw2();
}

function draw2() {
    ctx2.clearRect(0,0,WIDTH,HEIGHT);
    ctx2.drawImage(image2, 240, 200);
}

function draw1() {
    ctx1.clearRect(0, 0, WIDTH, HEIGHT);
    ctx1.drawImage(city, 0, 0);
}

¿Por qué está pasando esto? ¿Qué me estoy perdiendo?

preguntado el 22 de mayo de 12 a las 12:05

Tengo el mismo problema. He resuelto mi problema al estudiar esto. stackoverflow.com/questions/2142535/… -

use la función img.onload antes de dibujar su imagen -

Es como si todo se volviera a dibujar después de llamar a clear(). Usar image.onload tampoco funcionó. -

por cierto, estoy llamando a clear() a través de la propiedad onclick() de un enlace. No se si eso ayude o algo. -

El mismo problema contigo... -

1 Respuestas

Debería haber incluido el código HTML porque no está claro cuál es su problema, pero esto es lo que se me ocurrió.

"ANCHO" y "ALTO" podrían ser los alborotadores aquí. ¿Ha intentado reemplazarlos con canvas.width y canvas.height?

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#F00";
  ctx.fillRect(0, 0, 320, 180);
}

draw();
<canvas id="myCanvas" width=400 height=400></canvas>

Respondido 03 Jul 18, 23:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.