title: How to put a gif with Canvas
body: <p>I'm creating a game, and in my game, when the HERO stay near the MONSTER, a gif will be showed, to scare the player. But I have no idea how to do this. I tried to put PHP or HTML code, but it doesn't works... The function is <code>AtualizaTela2()</code>.  This is my main code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Hero's Escape Game&lt;/title&gt;
  &lt;script language="JavaScript" type="text/javascript"&gt;
  
  var objCanvas=null; // object that represents the canvas
  var objContexto=null; 
  
  // Hero positioning control
  var xHero=300;
  var yHero=100;
  
  // Monster positioning control
  var xMonster=620;
  var yMonster=0;
  
  var imgFundo2 = new Image();
  imgFundo2.src = "Images/Pista2.png";
  
  var imgMonster = new Image();
  imgMonster.src = "Images/Monster.png";
  
  var imgHero = new Image();
  imgHero.src = "Images/Hero.png";
  
  function AtualizaTela2(){
  
  if((xHero &gt;= xMonster-10)&amp;&amp;(xHero &lt;= xMonster + 10))
  {
  
  /*gif here*/
  
  }
  
  objContexto.drawImage(imgFundo2,0,0);
  objContexto.drawImage(imgHero, xHero, yHero);
  objContexto.drawImage(imgMonster, xMonster, yMonster);
  
  function Iniciar(){
  
  objCanvas = document.getElementById("meuCanvas");
  objContexto = objCanvas.getContext("2d");
  AtualizaTela2();
  
  }
  
  /* the function HeroMovement() and MonsterMovement() are not here */
  
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onLoad="Iniciar();" onkeydown="HeroMovement(event);"&gt;
  
  &lt;canvas id="meuCanvas" width="1233"
  height="507"
  style="border:1px solid #000000;"&gt;
  Seu browser não suporta o elemento CANVAS, atualize-se!!!
  &lt;/canvas&gt;&lt;BR&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the simplified code, because the real code is very big!</p>
  
  <p>Thanks for the help! :)</p>