Actualmente estoy haciendo un clon de Agar.io basado en esto . Estoy atascado en hacer que aparezcan máscaras en lugar del color sólido aleatorio. Con el código actual, cuando selecciona una máscara, haciendo que config.skin sea verdadero, se congela y no puedo moverme, pero aún puedo chatear. Y todavía no tengo ninguna imagen dibujada.

config.skin es una cadena de imagen codificada en base64

el gráfico es el contexto 2d del lienzo

 if (config.skin) { graph.strokeStyle = "hsl(" + userCurrent.hue + ", 100%, 45%)"; graph.fillStyle = "hsl(" + userCurrent.hue + ", 100%, 50%)"; graph.lineWidth = playerConfig.border; var skin = new Image();//userCurrent.x - 2 * userCurrent.size, userCurrent.y - 2 * userCurrent.size); skin.src = config.skin; skin.onload = () => { // jshint ignore:line graph.beginPath(); graph.arc(userCurrent.h / 2, userCurrent.w / 2, userCurrent.radius, 0, Math.PI * 2, false); graph.clip(); graph.drawImage(skin, userCurrent.x - 2 * userCurrent.size, userCurrent.y - 2 * userCurrent.size); //, 4 * userCurrent.size, 4 * userCurrent.size); }; } else { graph.strokeStyle = "hsl(" + userCurrent.hue + ", 100%, 45%)"; graph.fillStyle = "hsl(" + userCurrent.hue + ", 100%, 50%)"; graph.lineWidth = playerConfig.border; }

código completo en github