title: Why the image I specify doesn't appears on the canvas?
body: <p>I'm simply trying to get an image inside the canvas, but, for some reason, it doesn't appears.</p>
  
  <p>I think the problem relies in how I'm calling the function, tho I don't get what could be wrong.</p>
  
  <p>The <em>problematic code</em> starts on //Imagen</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="es"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;CH1EX1: Basic Hello World HTML Page&lt;/title&gt;
  
      &lt;script src="scripts/modernizr.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
          window.addEventListener("load", eventWindowLoaded);
          var Debugger = function() {};
  
          Debugger.log = function (message){
              try{
                  console.log(message);
              } catch (exception){
                  return;
              }
          }
  
          function eventWindowLoaded(){
              canvasApp();
          }
  
          function canvasSupport(){
              return Modernizr.canvas;
          }
  
          var theCanvas = document.getElementById("canvasOne");
  
  
          function canvasApp(){
  
              if(!canvasSupport()){ //Checa soporte del navegador para Canvas
                  return;
              }
  
              var theCanvas = document.getElementById("canvasOne"); //Encuentra y asigna a la variable el Canvas (con ese id)
              var context = theCanvas.getContext("2d"); //Usaremos el contexto 2D, por lo que se hace ésto, y usaremos context para modificar nuestro canvas.
  
              Debugger.log("Dibujando el Canvas");
  
              function dibujarPantalla(){
  
                  //Fondo
                  context.fillStyle = "#ffffaa";
                  context.fillRect(0, 0, 800, 600);
  
                  //Texto
                  context.fillStyle = "#000000";
                  context.font = "20px _sans";
                  context.textBaseline = "top";
                  context.fillText("Óscar A. Montiel", 800/2, 300);
  
                  //Imagen
                  var imagen = new Image();
                  imagen.src = "dog.jpg";
                  Debugger.log("Dibujando imagen.")
  
                  var imagenDibujada = false;
                  imagen.onLoad = function(){// cuando se carga
                      context.drawImage(imagen, 0, 0);
                      imagenDibujada = true;
                      Debugger.log("Imagen dibujada");
                  }
                  if(imagenDibujada === false){
                      Debugger.log("La imagen no se dibujó.");
                  }
  
                  //Caja
                  context.strokeStyle = "#000000";
                  context.strokeRect(5, 5, 800, 600);
              }
  
              dibujarPantalla();
  
              Debugger.log("Pantalla dibujada.")
  
          }
  
  
  
      &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="position: absolute; top: 50px; left: 50px"&gt;
      &lt;canvas id="canvasOne" width="1280" height="720"&gt;
          &lt;!-- Mensaje que aparece cuando el navegador no soporta Canvas --&gt;Eres un vejestorio usando navegadores medievales. ¡Actualízate!
      &lt;/canvas&gt;
  
      &lt;/div&gt;
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>