title: Javascript canvas game reset error, draw failed
body: <p>im making a game using js and canvas, im a having a problem, everything goes good till player loses and i restart the level. clearRect is working, but the map is not painted again, so the screen stays black, when i move the goblin it paints how it is supposed to do. What am i doing wrong?</p>
  
  <p>console error</p>
  
  <p>Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'</p>
  
  <p>my js file</p>
  
  <pre><code>var world1 = [      
  ["S",".","B","P"],
  ["W","G","P","B"],  
  ["S",".","B","."],   
  ["I","B","P","B"]]  
  
  
  var visited1 = [    
  ["f","f","f","f"],
  ["f","f","f","f"],
  ["f","f","f","f"],
  ["d","f","f","f"]]          
  
  
  var row=3;
  var col=0;
  
  var gold=false;
  var win=false;
  var state="estas a salvo";
  
  var level = 0;
  var ActualWorld=world1;
  var ActualVisited=visited1;
  
  var canvas = document.getElementById('board');
  context = canvas.getContext('2d');
  var width = window.innerWidth;
  var height = window.innerHeight;
  context.canvas.width  = window.innerWidth;
  context.canvas.height = window.innerHeight;
  
  unvisited = new Image();
  unvisited.src = 'img/unvisited1.png';
  visited = new Image();
  visited.src = 'img/visited1.png';
  duende = new Image();
  duende.src= 'img/duendeb.png';
  wind = new Image();
  wind.src = 'img/wind.png';
  smell = new Image();
  smell.src = 'img/smell.jpg';
  
  s1 = new Image();
  s1.src = 'img/1.png';
  s2 = new Image();
  s2.src = 'img/2.png';
  s3 = new Image();
  s3.src = 'img/3.png';
  s4 = new Image();
  s4.src = 'img/4.png';
  s5 = new Image();
  s5.src = 'img/5.png';
  s6 = new Image();
  s6.src = 'img/6.png';
  s7 = new Image();
  s7.src = 'img/7.png';
  
  
  var side = height/4;
  drawBoard(ActualWorld, ActualVisited);
  control();
  
  function drawBoard(world, visited)
  {
  
  
      unvisited.onload = function(){
  
          updateScreen(ActualWorld, ActualVisited);
      }   
  
  
  }
  function updateScreen(world, visited){
      var tmp;
      for (var i = 0; i&lt;visited.length; i++) {
          for (var j =0; j&lt; visited.length; j++) { 
              tmp=visited[i][j];
              if (tmp=="f") {
                  context.drawImage(unvisited,side*j,side*i,side,side);
              }
              else if (tmp=="t") {
                  context.drawImage(visited, side*j,side*i,side,side);//here is the console error
              }
              else {
                  context.drawImage(duende, side*j, side*i, side, side);
  
              }
          }
      }
  
  }
  
  function handleKeyDown(e){
      var k = e.keyCode;
      if (k==40 &amp;&amp; row&lt;ActualVisited.length-1) {
          ActualVisited[row][col]="t";
          context.drawImage(visited,side*col, side*row,side,side);
          row++;
          ActualVisited[row][col]="d";
          context.drawImage(duende, side*col, side*row, side, side);
          console.log("down");
          check();
      }
      else if (k==38 &amp;&amp; row&gt;0) {
          ActualVisited[row][col]="t";
          context.drawImage(visited,side*col, side*row,side,side);
          row--;
          ActualVisited[row][col]="d";
          context.drawImage(duende, side*col, side*row, side, side);
          console.log("up");
          check();
      }
      else if (k==37 &amp;&amp; col&gt;0) {
          ActualVisited[row][col]="t";
          context.drawImage(visited,side*col, side*row,side,side);
          col--;
          ActualVisited[row][col]="d";
          context.drawImage(duende, side*col, side*row, side, side);
          console.log("left");
          check();
      }
      else if (k==39 &amp;&amp; col&lt;ActualVisited.length-1) {
          ActualVisited[row][col]="t";
          context.drawImage(visited,side*col, side*row,side,side);
          col++;
          ActualVisited[row][col]="d";
          context.drawImage(duende, side*col, side*row, side, side);
          console.log("right");
          check();
      }
  
  
  }
  
  function control(){
      window.addEventListener('keydown',this.handleKeyDown,false);
  }
  
  function check(){
      if (ActualWorld[row][col]==".") {
          console.log("estas a salvo");
          context.drawImage(s1, ActualWorld.length*side+side, 0);
      }
      else if (ActualWorld[row][col]=="B") {
          console.log("sientes un viento fuerte");
          context.drawImage(s2, ActualWorld.length*side+side, 0);
      }
      else if (ActualWorld[row][col]=="S") {
          console.log("sientes un terrible olor");
          context.drawImage(s3, ActualWorld.length*side+side, 0);
      }
      else if (ActualWorld[row][col]=="W") {
          console.log("has perdido, el wumpus te ha atrapado");
          context.drawImage(s4, ActualWorld.length*side+side, 0);
      }
      else if (ActualWorld[row][col]=="P") {
          console.log("has perdido, has caido en un abismo");
          context.drawImage(s5, ActualWorld.length*side+side, 0);
          restart();
      }
      else if (ActualWorld[row][col]=="G") {
          console.log("has robado el oro, escapa!");
          context.drawImage(s6, ActualWorld.length*side+side, 0);
          gold=true;
      }
      else if (ActualWorld[row][col]=="I" &amp;&amp; gold==true) {
          console.log("has ganado!");
          context.drawImage(s7, ActualWorld.length*side+side, 0);
          win=true;
          // nextLevel();
      }
  
  }
  
  /*function nextLevel(){
  
  }*/
  
  function restart(){
      //setTimeout(myFunction, 3000);
      //window.location.reload(true);
      level=0;
      gold=false;
      ActualWorld=world1;
      ActualVisited=visited1;
      win=false;
      row=3;
      col=0;
      //context.fillRect(0,0,width,height);
      context.clearRect(0, 0, width, height);
      updateScreen(ActualWorld, ActualVisited);
  }
  </code></pre>
  
  <p>my html file </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Game&lt;/title&gt;&lt;!-- titulo --&gt;
  
  
      &lt;link rel="stylesheet" href="css/styles.css"&gt;&lt;!-- enlazando archivo css --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- enlazando archivo js con el juego --&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;canvas id="board"  style = "border: 1px solid grey"&gt;&lt;/canvas&gt;
  &lt;script src="js/game.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>