ctx.fillText bağlantıda çizim yapmıyor

Question

Nedense ctx.fillText istemcisi sunucuya bağlandığında kesinlikle bir şey çizmek istemiyor. Konsol her şeyi düzgün bir şekilde günlüğe kaydeder, böylece işlev çalışır ancak tuval biraz aptaldır.

io.sockets.on('connection', function(socket){ 

    socket.id = Math.random(); 
    SOCKET_LIST[socket.id] = socket; 

    console.log(":: Client Connected -- " + Date()); 
}); 

setInterval(function(){ 

for(var i in SOCKET_LIST){ 
    var socket = SOCKET_LIST[i]; 

    socket.emit('PlayerID', { 
     id: socket.id 
    }); 
} 

}, 1000/25); 

Ve istemci tarafı:

<canvas id="ctx" width="800" height="500" style="border: 1px solid #000;"></canvas> 

<script type="text/javascript"> 
    var socket = io(); 

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


    socket.on('PlayerID', function(data){ 
     ctx.clearRect(0, 0, 800, 500); 
     ctx.fillText('Client', 0, 0); // (data.id.toString(), 0, 0) 
     console.log(data.id); 
    }); 
</script> 

Answer 1

ctx.fillText pozisyonları metin akımı textBaseline, yazı tipi, textAlign ve yön değerlerine göre

Burada sunucu tarafı kod kütlesi. Varsayılan olarak, tuvalin üstünde inen metin olmayan konumlar

. ctx.textBaseline = "top";'u eklemek ve/veya fillText numaralı çağrıya iletilen y koordinat değerini artırmak, metni görünür hale getirmek için yeniden konumlandırmak için kullanılabilir.