HTML / CSS - Problema utilizzo di plugin per canvas

Salve ragazzi, durante la creazione del mio client
ho la necessità di utilizzare dei TextBox su canvas.

Ho trovato dunque questo dalla rete.

goldfirestudios.com/blog/108/…

Il problema sta, che quando vado a fare il classico loop, il controllo si refresha in continuazione.
E per essere disegnato ha bisogno di un solo Clear. Cosa non ho capito perché accade.

Ho creato un sistema basato su processi di Rendering

esempio

    //Classi
var $system = new System(); //System
var $actor = new Actor(); //Actor Class
var $vec2 = new Vector2(); //Vector Class
var $win = new Scene_Window();
var $keyboard = new Keyboard();
var $mouse = new Mouse();
var $camera = new Camera();
var $gui = new GUI();
var $music = new Audio();
var $scene = new SceneManager();

Ed ho come dire fatto una sorta di Metodi identici per ogni tipo di classe
che richiama il draw.
tutto lo gestisce il SceneManager.

quindi faccio

$scene.Initialize(ctx,viewport);  //Ctx = Canvas , Viewport = Area virtuale
$scene.ChangeScene("SceneTitle");

dal momento che creo il loop

//Funzione loop
var fps = 30;
function Loop()
{
    ctx.clearRect(0,0,800,600);
    $scene.Render(ctx,viewport);
   
    
   window.setTimeout(Loop, 1000 / fps);
    
}

La Scene Title che sarebbe una schermata dove l'utente effettua il login è composta così

//-------------------------------
// Mire Engine - Scene Title
//------------------------------
// (C) Copyright Making Italia
//------------------------------

function SceneTitle()
{
    this.background = new Image();
    
}


SceneTitle.prototype.Initialize = function()
{
    
    this.background.src = "data\System\TitleScreen.png";
    sfx.src = "data\SE\cursor.mp3";
}


//Update Cycle
SceneTitle.prototype.Update = function()
{
    
}


//Draw Cycle
SceneTitle.prototype.Draw = function(ctx,viewport)
{
   
     if($system.GetOperatingSystem() == "Desktop")  { $gui.HideAll(); }
               
    
    ctx.drawImage(this.background,0,0);
    

      //------------  Problemi QUI

      var username = new CanvasText( canvas, {
			x: 20,
			y: 20,
			width: 300,
			placeholder: 'Enter your username...'
		} );
	
		var password = new CanvasPassword( canvas, {
			x: 20,
			y: 55,
			width: 300,
			placeholder: 'Enter your password...'
		} );
	
		var btt = new CanvasSubmit( canvas, {
			x: 20,
			y: 95,
			width: 300,
			placeholder: 'Submit',
			onSubmit: ( function() {
				return connection.send(Packet.Login + username.value + ":" + password.value);
			} )
		} );
  

  
     
}


SceneTitle.prototype.InputDown = function(e)
{
      
  
}


SceneTitle.prototype.InputUp = function(e)
{
    
}

In pratica il funzionamento è questo.

All'avvio
$scene.ChangeScene("SceneTitle";

Il SceneManager che sarebbe $scene cambia in SceneTitle.
Di conseguenza il Render loop sarà passato alla classe SceneTitle al proprio metodo Draw.
E fin qui non ci sono problemi.
Ma il problema è che quando va il Draw, l plugin usato per disegnare L'inputBox
continua a refreshare in particolar modo,
E come se mostrasse al primo render, il testo correttamente, al successivo render tutto vuoto.
per poi ripetere all'infinito

testo visibile, testo vuoto, testo visibile, testo vuoto.

Non riesco a capire il motivo di questo problema.
Fatto sta, e che quando tolgo dal file principale

alla funzione loop commento

//window.setTimeout(Loop, 1000 / fps);

non effettua più il refresh e stranamente funziona regolare.
come mai?

Forse il problema e' dentro Render (per il quale non c'e' il codice nel post).

p.s. usa developer.mozilla.org/en-US/docs/Web/API/window/… invece di setTimeout.

Grazie pietro si in effetti è molto più veloce.
Ma sarà compatibile con Cordova?

Perché successivamente il progetto dovrà essere compilato sia per Android che per iOS etc.

riguardo alla parte principale del codice è questa


Ti posto solo le porzioni interessate.

    Initialize();
    
 function Initialize()
{
     $system.GetOperatingSystem();
    
    ctx.font="30px Arial";
    
   
    $camera.Initialize(0,0,800,600);
    $camera.Layer1 = layer1;
    $camera.Layer2 = layer2;
    
    $actor.LoadImage("data\Charaset\chara.png");
    $actor.position = new Vector2();
    $actor.position.Vector2(640/2,480/2);
    
 
    $gui.Initialize();
    
      
    
    //Configurazione Scene
    $scene.Initialize(ctx,viewport);
    $scene.ChangeScene("SceneTitle");
    
    //Configurazione Window
    $win.Cache("System01.png");
    
   
}


/Ciclo Rendering
Loop();



//Funzione loop
var fps = 60;
function Loop()
{
  
    $scene.Render(ctx,viewport);
    ctx.clearRect(0,0,800,600);
    

      if($scene.Scene != "SceneTitle" )
        {
            Update();
            Render();
           //window.setTimeout(Loop, 1000 / fps);
            requestAnimationFrame(Loop);  //Metodo di piero
            
        }
     //Qui se escludo il commento si bugga
    //requestAnimationFrame(Loop);
}



function Update()
{
  $actor.Update();
  $mouse.Update(); 
    
}
    

    
//Rendering GLobale
function Render()
{
    
    ctx.clearRect(0, 0, 800, 600);
    $scene.Render(ctx,viewport);         
            
 
}

Il problema è il void loop

Se tolgo il requestAnimation esempio dalla condizione if e lo pongo in fondo
dove c'è il commento del timeout, si bugga mostrando il problema di cui ti dicevo.
qualsiasi cosa che vada a fare il repaint sul canvas mentre quel plug-in è in esecuzione
viene buggato.

non sò, ma sicuramente il problema non è da me.
Non credo che sbagli qualcosa, anche perché prima di quel plug-in funzionava tutto correttamente.

E se sposti la chiamata "new CanvasText( canvas ..." da Draw a Initialize ? Forse non gli piace essere inizializzato piu' volte.