・TypeError: gc.drawimage is not a functionと表示される

前提・実現したいこと

ソーコバン（というのか？）を作りたい

発生している問題・エラーメッセージ

TypeError: gc.drawimage is not a function　と表示される

TypeError: gc.drawimage is not a function  cattyit.html:80:32

該当のソースコード

javascript
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>CarryIt</title>
5        <meta charset="UTF-8">
6        <script>
7            "use strict";
8
9            var data=[
10                　　　　　　[ 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
11                　　　　　　[ 6, 6, 6, 6, 6, 0, 0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
12                　　　　　　[ 6, 6, 6, 6, 6, 2, 0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
13                　　　　　　[ 6, 6, 6, 6, 6, 0, 0, 2, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
14                　　　　　　[ 6, 6, 6, 0, 0, 2, 0, 0, 2, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
15                　　　　　　[ 6, 6, 6, 0, 6, 0, 6, 6, 6, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
16                　　　　　　[ 6, 0, 0, 0, 6, 0, 6, 6, 6, 0, 6, 6, 6, 6, 0, 0, 1, 1, 6, 6],
17                　　　　　　[ 6, 0, 2, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 6, 6],
18                　　　　　　[ 6, 6, 6, 6, 6, 0, 6, 6, 6, 6, 6, 0, 6, 0, 0, 0, 1, 1, 6, 6],
19                　　　　　　[ 6, 6, 6, 6, 6, 0, 0, 0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 6],
20                　　　　　　[ 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6]
21            ];
22            var gc, px=12,py=8;
23
24            /**
25            *初期化関数
26            */
27            function init(){
28                gc=document.getElementById("soko").getContext("2d");
29                onkeydown=mykeydown;
30                repaint();
31            }
32            
33            function u(){mykeydown({keyCode:38});}
34            function d(){mykeydown({keyCode:40});}
35            function l(){mykeydown({keyCode:37});}
36            function r(){mykeydown({keyCode:39});}
37
38            function mykeydown(e){
39
40                var dx0=px,dx1=px, dy0=py,dy1=py;
41                switch(e.keyCode){
42                    case 37: dx0--;dx1-=2;
43                        break;
44                    case 38: dy0--;dy1-=2;
45                        break;
46                    case 39: dx0++;dx1+=2;
47                        break;
48                    case 40: dy0++;dy1+=2;
49                        break;
50                }
51
52                if((data[dy0][dx0]&0x2)==0){ //荷物なし＆壁なし→進む
53                    px=dx0;
54                    py=dy0;
55                }else if((data[dy0][dx0]&0x6)==2){//進行方向に荷物あり
56                    if((data[dy1][dx1]&0x2)==0){//荷物なし＆壁なし→進む
57                        data[dy0][dx0]^=2;  //隣の荷物をクリア
58                        data[dy1][dx1]|=2;  //さらに先に荷物をセット
59                        px=dx0;
60                        py=dy0;
61                    }
62                }
63
64                repaint();
65            }
66
67            function repaint(){
68                gc.fillStyle="black";
69                gc.fillRect(0,0,800,440);
70
71                for(var y=0;y<data.length;y++){
72                    for(var x=0;x<data[y].length;x++){
73                        if(data[y][x]&0x1){
74                            gc.drawimage(imgGoal,x*40,y*40,40,40);
75                        }
76                        if(data[y][x]&0x2){
77                            gc.drawimage(imgLuggage,x*40,y*40,40,40); //←ここがエラーになる
78                        }
79                        if(data[y][x]==6){
80                            gc.drawimage(imgWall,x*40,y*40,40,40);
81                        }
82                    }
83                }
84                gc.drawimage(imgWorker,px*40,py*40,40,40);
85            }
86        </script>
87    </head>
88    <body onload="init()">
89        <canvas id="soko" width="800" height="440"></canvas>
90    <table>
91        <tr><td></td><td><button onclick="u()">U</button></td><td></td></tr>
92        <tr><td><button onclick="l()">L</button></td><td></td>
93            <td><button onclick="r()">R</button></td></tr>
94        <tr><td></td></tr><button onclick="d()">D</button></td><td></td></tr>
95    </table>
96        <img id="imgWall" src="imgWall.png" style="display:none">
97        <img id="imgGoal" src="imgGoal.png" style="display:none">
98        <img id="imgWorker" src="imgWorker.png" style="display:none">
99        <img id="imgLuggage" src="imgLuggage.png" style="display:none">
100    </body>
101</html>

試したこと

pngファイルを40x40で作ってみた。

補足情報（FW/ツールのバージョンなど）

画像はないので自分で40x40で作ってみた

行動規範の内容に同意します

回答1件

ベストアンサー

エラー文のとおり、 gc.drawimage が関数ではないのに gc.drawimage() と関数扱いして呼び出そうとしているためエラーになっています。

こういった場合は、console.log(gc.drawimage) などとしてみるとすぐに原因がわかります。

今回の場合は undefined が出力されるのではないでしょうか。
つまり、gc は drawimage なんて持っていないということですね。今度は gc も console.log(gc) で出力してみてください。ブラウザにもよりますが、 gc の持つパラメータが確認できるのではないでしょうか。

試したこと にはこういうことを試して記載するべきかと思います。出力したい画像を手動で作っても、問題の解決にはつながりませんよ……。

さて、もうお分かりかと思いますが、今回のエラーの原因は、 i を小文字にしたことですね。 gc.drawimage ではなく gc.drawImage とすればエラーは直ると思います。(参考)

投稿2020/05/13 09:48