canvasタグの挙動について

前提・実現したいこと

下記MDNのcanvasチュートリアルを用いて、htmlで実装されているcanvasタグの学習をしております。
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage

この中で、「単純な描画」という項目でサンプルコードの記載があり、その挙動を確認していたのですが、getContextメソッドの挙動が分からず、質問いたしました。

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

①サンプルコードを実行すると、正常に表示される

②サンプルコードの中の、
「var ctx = canvas.getContext("2d");」
という1文の（"2D"）という部分を（'2D'）に変更してみる。
具体的には、
「var ctx = canvas.getContext('2D');」
に変更して保存、再読み込みすると、描画がされなくなる

③再度、
「var ctx = canvas.getContext("2d");」
に記述を戻しても、２度と描画は行われなくなり、そのコードは２度と使えなくなってしまう

該当のソースコード

html5

＜サンプルコード＞

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 50, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 50, 50);
  }
}

</script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>

＜描画できなくなるコード＞

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 50, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 50, 50);
  }
}

</script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html>

試したこと

MDN以外の色々なサイトのサンプルコードも５回ほど試していますが、同様の現象で終始してしまいます。
１度でも描画読み込みができなくなったら、再読み込みしても再表示できなくなってしまいます。

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

VSCode バージョン: 1.45.1

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

回答1件

ベストアンサー

多分キャッシュが効いてしまってる関係だと思います(自身では再現させることできませんでした)

とりあえずは、

Chromeで言えばF12押してコンソールにエラー出てるとかSourcesみて2dってなってるか確認するとかかな
スーパーリロード(正式名称なのかしら…)してみる

投稿2020/06/04 04:03

rururu3

総合スコア5545

arranzt

2020/06/04 16:28

ご確認いただきありがとうございました！キャッシュの点は基本的な部分でありながら見逃しておりました…キャッシュクリアにて対応したいと思います！

arranzt

2020/06/04 19:16

コンソール画面を確認したところ、どうやら("2D")を('2D')にした段階で「Uncaught TypeError: Cannot set property 'fillStyle' of null」がエラーとして発生しているようでした。要素取得系メソッドの一種であるgetContext()は正しく処理されている時は「CanvasRenderingContext2D {canvas: canvas#canvas, globalAlpha: 1, globalCompositeOperation: "source-over", filter: "none", imageSmoothingEnabled: true, …}」を返していたので、おそらく読み込み順序などJSの仕様が絡んできているっぽい感じでした。要素取得系のメソッドは、それが空要素であった場合、ページ読み込み後に実行しないとnullを返すみたいなので、今後も注意してみます！ありがとうございました！

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