No puedo entender por qué cuando estoy creando una imagen desde una fuente base64 (procedente de otro lienzo cnvBase ) 'parpadea': la imagen real imgBW está bien y permanece en su lugar hasta que cnvBase una nueva imagen base64, pero en cnvBW aparece por una fracción de segundo y desaparece inmediatamente.

 HTML <canvas id="cnvBase"></canvas> <img id="imgBW"> <canvas id="cnvBW"></canvas> JS function createBWImg(){ console.log('image '+imageNB.substr(0,50)) // data:image/png;base64,iVBORw0KG.... document.getElementById('imgBW').style.width = w+'px'; document.getElementById('imgBW').style.height = y+'px'; document.getElementById('imgBW').src = imageNB; let newimage = new Image(); newimage.onload = function() { ctxBW.drawImage(newimage, 0, 0); }; newimage.src = imageNB; }

Nota: cnvBase envía una nueva imagen cada segundo cuando el usuario mueve su teléfono inteligente (valor beta):

 window.addEventListener('deviceorientation', function(event) { alpha= Math.round(event.alpha); beta = Math.round(event.beta); gamma= Math.round(event.gamma); setTimeout(function() { if (beta >= 0 && beta <= 90) { getValues(alpha,beta,gamma); } }, 1000); });

La función getValues(a,b,g) recupera una parte del flujo de la cámara y la coloca en cnvBase de acuerdo con el valor de b

EDITAR

OK, creo que la imagen 'parece' seguir siendo la misma, pero de hecho no es así. Con este código, el lienzo mantiene el color correcto durante un segundo sin parpadear... Creo que pasa algo (¿pero qué?) durante la producción de la imagen: algo se envía al lienzo (¿pero qué?).

 let color; if(b>=0 &&b<34) color='red'; if(b>=34 &&b<67) color='green'; if(b>=67 &&b<90) color='blue'; ctxBW.fillStyle = color; ctxBW.fillRect(0, 0, w, y);

EDITAR 2

Cada vez más extraño. Al agregar esta parte del código para PC (porque cambiar la orientación beta es difícil de obtener) funciona perfectamente: la imagen en el lienzo no parpadea y permanece en su lugar, pero no en los teléfonos donde aparece y desaparece tan pronto como se crea (efecto flash )

 if(screen > 600){ // screen is screen width setInterval(function(){ send_pseudo_beta(Math.floor((Math.random() * 10)+1)*8) // random beta },1000); }