質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20387questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Chrome

    771questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScriptをChromeで実行するとエラーが出る

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 879

aiueoaiueoaiue

score 82

実現したい事

JavaScriptのソースをChromeで実行するとエラーが表示されます。

Uncaught TypeError: Cannot read property 'getContext' of null


といエラーが

var ctx = canvas.getContext('2d');


の部分で表示されているっぽいです。
解決策が分かる方回答お願いします。

JavaScriptのソース

window.onload = (function() {
    //HTML上の canvas タグを取得
    var canvas = document.getElementById('myCanvas');

    //レスポンシブ対応 画面サイズでキャンバスサイズを調整します
    if (screen.width < 860) {
        canvas.width = 700 * screen.width / 860;
        canvas.height = 400 * screen.width / 860;
    }

    //キャンバスの背景カラーを決定。 fillRectは長方形に塗るメソッド
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.fillStyle = "#f5f5f5";
    ctx.fillRect(0, 0, 700, 400);

    //初期値(サイズ、色、アルファ値)の決定
    var defosize = 7;
    var defocolor = "#555555";
    var defoalpha = 1.0;

    //マウス継続値の初期値、ここがポイント
    var mouseX = "";
    var mouseY = "";

    //各イベントに紐づけ
    canvas.addEventListener('mousemove', onMove, false);
    canvas.addEventListener('mousedown', onClick, false);
    canvas.addEventListener('mouseup', drawEnd, false);
    canvas.addEventListener('mouseout', drawEnd, false);

    //マウス動いていて、かつ左クリック時に発火。
    function onMove(e) {
        if (e.buttons === 1 || e.witch === 1) {
            var rect = e.target.getBoundingClientRect();
            var X = ~~(e.clientX - rect.left);
            var Y = ~~(e.clientY - rect.top);
            //draw 関数にマウスの位置を渡す
            draw(X, Y);
        };
    };

    //マウスが左クリックされると発火。
    function onClick(e) {
        if (e.button === 0) {
            var rect = e.target.getBoundingClientRect();
            var X = ~~(e.clientX - rect.left);
            var Y = ~~(e.clientY - rect.top);
            //draw 関数にマウスの位置を渡す
            draw(X, Y);
        }
    };

    //渡されたマウス位置を元に直線を描く関数
    function draw(X, Y) {
        ctx.beginPath();
        ctx.globalAlpha = defoalpha;
        //マウス継続値によって場合分け、直線の moveTo(スタート地点)を決定
        if (mouseX === "") {
            //継続値が初期値の場合は、現在のマウス位置をスタート位置とする
            ctx.moveTo(X, Y);
        } else {
            //継続値が初期値ではない場合は、前回のゴール位置を次のスタート位置とする
            ctx.moveTo(mouseX, mouseY);
        }
        //lineTo(ゴール地点)の決定、現在のマウス位置をゴール地点とする
        ctx.lineTo(X, Y);
        //直線の角を「丸」、サイズと色を決める
        ctx.lineCap = "round";
        ctx.lineWidth = defosize * 2;
        ctx.strokeStyle = defocolor;
        ctx.stroke();
        //マウス継続値に現在のマウス位置、つまりゴール位置を代入
        mouseX = X;
        mouseY = Y;
    };

    //左クリック終了、またはマウスが領域から外れた際、継続値を初期値に戻す
    function drawEnd() {
        mouseX = "";
        mouseY = "";
    }

    //メニューのアイコン関係
    var menuIcon = document.getElementsByClassName("menuicon");
    for (i = 0; i < menuIcon.length; i++) {
        menuIcon[i].addEventListener("click", canvasMenu, false)
    }

    //メニューボタン管理
    function canvasMenu() {
        //id 値によって場合分け
        var thisId = this.id;
        if (thisId.indexOf("size") + 1) {
            defosize = ~~this.id.slice(4, this.id.length);
        }
        if (thisId.indexOf("color") + 1) {
            defocolor = "#" + this.id.slice(5, this.id.length);
        }
        if (thisId.indexOf("alpha") + 1) {
            defoalpha = (~~this.id.slice(5, this.id.length)) / 10;
        }
        if (thisId.indexOf("clear") + 1) {
            //全消しボタン、OKされた場合は fillRect 長方形で覆います
            if (confirm("すべて消去しますか?")) {
                ctx.beginPath();
                ctx.fillStyle = "#f5f5f5";
                ctx.globalAlpha = 1.0;
                ctx.fillRect(0, 0, 700, 400);
            }
        }
    }
})();

HTMLのソース

<canvas id="myCanvas" width="700" height="400"></canvas>
<script src="canvas.js"></script>
<div id="canvasmenu">
    <div class="menuicon" id="clear">×</div>
    <div class="menuicon" id="colorf5f5f5"></div>
    <div class="menuicon" id="size21">21</div>
    <div class="menuicon" id="size14">14</div>
    <div class="menuicon" id="size7">7</div>
    <div class="menuicon" id="size3">3</div>
    <div class="menuicon" id="colore91e63" style="background-color:#e91e63"></div>
    <div class="menuicon" id="colorffeb3b" style="background-color:#ffeb3b"></div>
    <div class="menuicon" id="colorff4801" style="background-color:#ff4801"></div>
    <div class="menuicon" id="color536dfe" style="background-color:#536dfe"></div>
    <div class="menuicon" id="color009688" style="background-color:#009688"></div>
    <div class="menuicon" id="color00e676" style="background-color:#00e676"></div>
    <div class="menuicon" id="color555555" style="background-color:#555555"></div>
    <div class="menuicon" id="alpha10" style="background-color:rgba(255,72,1, 1.0)">10</div>
    <div class="menuicon" id="alpha6" style="background-color:rgba(255,72,1, 0.6)">6</div>
    <div class="menuicon" id="alpha3" style="background-color:rgba(255,72,1, 0.3)">3</div>
    <div class="menuicon" id="alpha1" style="background-color:rgba(255,72,1, 0.1)">1</div>
</div>

実行方法

Chromeで新しいタブを開きF12を押す。Consoleタブを押し、JavaScriptのソースを張り付けEnter.

エラーメッセージ

VM69:12 Uncaught TypeError: Cannot read property 'getContext' of null
    at <anonymous>:12:22
    at <anonymous>:113:3

補足情報

HTMLとJavaScriptは同じディレクトリに入れてあります。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

エラーの内容は、「 null のプロパティ getContext は読み込めません」という意味です。
これは、var ctx = canvas.getContext('2d')の部分で canvas変数がnullであることを示唆しています。
可能なら、この1行前にブレークポイントを設定し、変数の内容を見てみましょう。

原因ですが、提示いただいているコードの中にはないと思います。
おそらく、スクリプトが<canvas id="myCanvas" width="700" height="400"></canvas>の部分より前にあるのではないでしょうか。

スクリプトのvar canvas = document.getElementById('myCanvas');の実行時に canvas タグがまだ読み込まれていないと、返り値は null となり、提示されたエラーが出るはずです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/06 02:19

    確かに確認してみた結果、canvas変数がnullだったようです。しかしHTML側に
    <script src="canvas.js"></script>
    の記述を追加して、JavaScriptをもう一度Chromeで実行してみても変化がありませんでした。

    キャンセル

+1

<script src="canvas.js"></script></body>の直前で読み込みましょう。
DOM形成後に読み込みが行われるようになります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

0

JavaScript冒頭を

(function() { 


window.onload = function() {

にしてみるといかがでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/05 22:50

    window.onload = を追加しても同じエラーメッセージのままでした。

    キャンセル

  • 2018/08/06 06:17

    そもそもjs読み込ませる記載入れてなかったんですか。
    ひとまずその読み込ませる記述も</body>の直前にしてみてください。
    あとはcanvasという変数名を変えてみるとか。(予約語ではないようですが)
    window.onloadではなくそのcanvasのonloadにしてみても良いかもしれません。

    キャンセル

  • 2018/08/06 06:44

    window.onload = (function(){})()ではなく、
    window.onload = function(){} にしないと意味がなかったと思います……
    また、以前からエラーメッセージが出ていたということは、head 内でも同じスクリプトを読み込んでいませんか? そちらでエラーが出てしまうと、以降の処理がすべて中断している可能性があります。

    キャンセル

  • 2018/08/06 07:35

    あ、そこかもしれませんね。補足ありがとうございます。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20387questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    5124questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Chrome

    771questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。