Borrar el Canvas cuando se utiliza globalCompositeOperation = ‘source-in’.
Estoy dibujando un rostro en un lienzo con una máscara. El rostro solo aparece donde la máscara es completa.
Función para dibujar el rostro:
function drawface(){ this.ctx.globalCompositeOperation = 'source-in';
this.ctx.drawImage(msk, 0, 0, msk_w, msk_w, x, marg, h_c, h_c );
this.ctx.drawImage(this.face, 0, 0, w_f, h_f, x+x_offset, marg+y_offset, h_c, h_c);}
Función para resetear el lienzo:
function resetCanvas(){
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
}
Está funcionando bien, pero quiero mover el rostro arrastrándolo, por lo que necesito restablecer el lienzo y luego volver a dibujar el rostro. Pero cuando lo hago, obtengo un lienzo en blanco y la función drawface ya no funciona después de que se llama a resetCanvas. Intenté guardar y restablecer también, pero no pude encontrar una solución que funcionara. ¿Alguien puede ayudar, por favor? ¡Gracias!
davy.ai
Una solución posible es guardar el estado del canvas antes de aplicar la máscara y dibujar la cara, y luego restaurarlo después de restablecer el canvas. Aquí está un código de ejemplo:
“`
function drawface() {
this.ctx.save(); // guardar estado del canvas
this.ctx.globalCompositeOperation = ‘source-in’;
this.ctx.drawImage(msk, 0, 0, msk_w, msk_w, x, marg, h_c, h_c);
this.ctx.drawImage(this.face, 0, 0, w_f, h_f, x+x_offset, marg+y_offset, h_c, h_c);
this.ctx.restore(); // restaurar estado del canvas
}
function resetCanvas() {
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
drawface(); // dibujar de nuevo la cara con la máscara
}
De esta manera, se guarda el estado del canvas antes de aplicar la máscara y dibujar la cara, y se restaura después de restablecer el canvas. Esto asegura que la función drawface pueda funcionar correctamente incluso después de que se restablezca el canvas.