draw() {
  // 頭
  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x + this.width / 2, this.y, 15, 0, Math.PI * 2);
  ctx.fill();

  // 胴体
  ctx.fillRect(this.x + this.width / 2 - 5, this.y + 15, 10, 30);

  // 腕
  ctx.beginPath();
  ctx.moveTo(this.x + this.width / 2 - 15, this.y + 20);
  ctx.lineTo(this.x + this.width / 2 + 15, this.y + 20);
  ctx.lineWidth = 5;
  ctx.strokeStyle = this.color;
  ctx.stroke();

  // 脚
  ctx.beginPath();
  ctx.moveTo(this.x + this.width / 2, this.y + 45);
  ctx.lineTo(this.x + this.width / 2 - 10, this.y + 70);
  ctx.moveTo(this.x + this.width / 2, this.y + 45);
  ctx.lineTo(this.x + this.width / 2 + 10, this.y + 70);
  ctx.stroke();

  // HP表示
  ctx.fillStyle = 'black';
  ctx.font = '12px sans-serif';
  ctx.fillText(`HP: ${Math.floor(this.health)}`, this.x, this.y - 10);
}


<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>