Javascript Canvas游戏重置错误，绘制失败

Question

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?

console error

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

my js file

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<visited.length; i++) {
        for (var j =0; j< 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 && row<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 && row>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 && col>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 && col<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" && 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);
}

my html file

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Game</title><!-- titulo -->


    <link rel="stylesheet" href="css/styles.css"><!-- enlazando archivo css -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

    <!-- enlazando archivo js con el juego -->
</head>
<body>

<canvas id="board"  style = "border: 1px solid grey"></canvas>
<script src="js/game.js"></script>
</body>
</html>

Answer 1

The var visited is an image and in updateScreen you attempt to draw the image where you currently get the error. This is because the second argument of the function updateScreen is also named visited which is not an image. Change these lines,

function updateScreen(world, visited)
{
    var tmp;
    for (var i = 0; i<visited.length; i++)
    {
        for (var j =0; j< visited.length; j++)
        { 
            tmp=visited[i][j];

to something like so,

function updateScreen(world, v)
{
    var tmp;
    for (var i = 0; i<v.length; i++)
    {
        for (var j =0; j< v.length; j++)
        { 
            tmp=v[i][j];

Or, alternatively, you can rename the image visited to something else and update all the references to it.