как я могу создать более одного аватара?

Question

поскольку я учусь кодировать и использовать холст, я делаю этот проект, чтобы бросить вызов самому себе, но получил этот вопрос; Мой друг учит меня, как использовать холст, ему удалось сгенерировать аватар из игры, используя его API, и мы использовали форму ввода для псевдонима, а затем нарисовали аватар ниже, все нормально. НО я хочу нарисовать тот же аватар в других частях страницы, вводя имя только один раз. это возможно? как сгенерировать этот аватар более одного раза

Используемый нами код выглядит следующим образом. Заранее спасибо o /

 <div id="info">
    <table>
			<tr>
      <td class="left">Habbo Name:</td>
     <td><input oninput="generateAvatar()" id="username" type="text"></td>
      </tr>
    <tr>
		<td class="left">Hotel:</td>
<td>
  <select id="hotel" name="select">
  <option value=".com">.com</option>
	<option value=".com.br" selected>Brazil</option>
	<option value=".fi">Finland</option>
  <option value=".es">Spain</option>
	<option value=".it">Italy</option>
  <option value=".nl">Netherlands</option>
	<option value=".fr">France</option>
	<option value=".de">Germany</option>
  <option value=".tr">Turkey</option>
	</select>
</td>
		</tr> 
  </table>
    

 
<canvas id="User" width="150" height="100"></canvas>    
<script>
var canvas = document.getElementById("User");
var ctx = canvas.getContext("2d");
var Head = new Image();  
var Body = new Image(); 
  
function generateAvatar(){
  tUsername = document.getElementById("username").value;
  tHotel = document.getElementById("hotel").value;
  Head.src = "https://www.habbo"+tHotel+"/habbo-imaging/avatarimage?user="+tUsername+"&head_direction=3&img_format=gif&gesture=0&headonly=1";
  Body.src = "https://www.habbo"+tHotel+"/habbo-imaging/avatarimage?img_format=gif&user="+tUsername+"&action=std&airection=2&head_direction=2&gesture=sml&size=s";
}
  
Body.onload = function(){
drawAvatar();
};
  
  Head.onload = function(){
drawAvatar();
};
  
  function drawAvatar(){
   ctx.clearRect(0, 0, canvas.width, canvas.height); // Cleans Canvas
    
 var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array
      s = 4,  // thickness scale
      i = 0,  // iterator
      x = 0,  // final position
      y = 0;
  
  // draw images at offsets from the array scaled by s
  for(; i < dArr.length; i += 2){
    ctx.drawImage(Head, x + dArr[i]*s, y + dArr[i+1]*s);
    ctx.drawImage(Body, 11 + dArr[i]*s, 15 + dArr[i+1]*s);
  
  // fill with color
  ctx.globalCompositeOperation = "source-in";
  ctx.fillRect(0,0,canvas.width, canvas.height);
    
  ctx.globalCompositeOperation = "source-over"; 
  }
    
    ctx.drawImage(Body, 11, 16);
    ctx.drawImage(Head, 0, 0);
    
  }

</script>

Answer 1

Вам нужно нарисовать ваш аватар относительно набора координат ...

См. Мои изменения в вашем коде ниже.
Я упростил и удалил большую часть вашего кода, чтобы пример был кратким , Я бы порекомендовал вам сделать то же самое, когда вы задаете вопросы, например, у вас не было проблем с выбором отеля, поэтому удалите его и жестко закодируйте любое значение, чтобы сосредоточиться на реальной проблеме.
Длинные блоки кода просто отговаривают других от погружений на ваш вопрос.

Ключ есть function drawAvatar(x, y, shadow), теперь ваша функция drawAvatar принимает некоторые параметры, и мы больше не выполняем clearRect внутри. Есть новый function draw(), это тот, который очищает холст и будет «контролировать» все рисунки.

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

var Head = new Image();
Head.onload = draw;

var Body = new Image();
Body.onload = draw;

generateAvatar()

function generateAvatar() {
  tUsername = document.getElementById("username").value;
  Head.src = "https://www.habbo.it/habbo-imaging/avatarimage?user=" + tUsername + "&head_direction=3&img_format=gif&gesture=0&headonly=1";
  Body.src = "https://www.habbo.it/habbo-imaging/avatarimage?img_format=gif&user=" + tUsername + "&action=std&airection=2&head_direction=2&gesture=sml&size=s";
}


function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  drawAvatar(10, 10, 30);
  drawAvatar(80, 15, 10);
  drawAvatar(150, 20, 0);
}

function drawAvatar(x, y, shadow) {
  ctx.shadowColor = 'black';
  ctx.shadowBlur = shadow;
  ctx.drawImage(Body, x + 11, y + 16);
  ctx.drawImage(Head, x, y);
}

<input oninput="generateAvatar()" id="username" type="text" value="Mario">
<br/>
<canvas id="User" width="250" height="100"></canvas>