I am currently making a clone of Agar.io based upon this
I am stuck on getting skins to appear instead of the solid random color. With the current code, when you select a skin, making config.skin true, it freezes and I am not able to move, but can still chat. And I still have no image drawn.
config.skin is a base64 encoded image string
graph is the canvas’s 2d context
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;
}
full code at github