Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
前提・実現したいこと
htmlで左上に赤い正方形を表示するプログラムです
発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read property 'getContext' of null
該当のソースコード
<!DOCTYPE html> <html> <body> <canvas id="can"></canvas> <script> const BLOCK_SIZE = 30; //ブロック１つのサイズを決めておく let can = document.getElementById("can"); //canvasの要素を取得 let con = can.getContext("2d"); //取ったcanからコンテクストを取得 con.fillStyle="red"; //conの色を指定 con.fillRect(0,0,50,50); //(x,y,横サイズ,縦サイズ) </script> </body> </html>
試したこと
if document.getElementById("can") == null
return
con = document.getElementById("can").getContext('2d')
調べて上のような処理を入れてみましたがうまくいきませんでした
補足情報（FW/ツールのバージョンなど）
htmlを始めて一週間です。Youtubeを見ながら勉強を始めました。
MacでVScodeを使って書いています。
初心者なのでわからないことが多いですが、よろしくお願いします。
>Youtubeを見ながら勉強を始めました。
何かしら公式やそれに準じるものでないなら、体系的な内容を網羅している入門書を通した方が良いです。
アドバイスありがとうございます。
Youtubeは現役エンジニアが初心者向けに解説しているもののようです。
入門書の購入も視野に入れてみます。
質問については、別の方の指摘で解決できました。ありがとうございました。
質問は編集できますので、対応を。
ちなみに、回答したのも私です。
誤認していました。申し訳ありません。
マークダウンなどの用語すら分からないので調べています。
もう少し時間がかかります。
おそらくできているかと思いますがどうでしょうか。
https://teratail.com/questions/238564
提示したリンク先↑を見ればマークダウンはともかくどうすればcode部分が対応できるか分かると思います（ほとんどの人がこれで対応できてますし）
「マークダウンとは」でしたらヘルプページにも対応できる機能の一覧があります。
https://teratail.com/help
どう記入したらどう出る みたいなのですね。
質問投稿画面にも同様のものがあります。
>Markdown記法を使うと回答が得られやすくなります
という左下にあるタブをクリック。
質問編集が時々反映されないバグがあるので、プレビュー確認したうえで投稿し、投稿後の質問本文も確認してください。
変更内容について書いていなかったので反映されなかったようです
なるほど。その場合は赤でエラーメッセージが出ますね。
一番下にエラーメッセージが出ていましたが、先ほどは気づきませんでした。
このサイト自体先ほど登録したもので、、、すみません。
いえ、徐々に慣れましょう。多少ITリテラシ高くても慣れるのは時間がかかるものです。
「現役エンジニアが初心者向けに解説」という宣伝文句で某Tアカデミーを想像した。
回答1件
0
ベストアンサー
<canvas[ ]id="can"></canvas>
[]で囲った場所が全角スペースになっています。
タグとしてはcanvas idという要素として認識されてるのでは。
HTMLに限らず、「要素間のスペース（プログラムを記載しない場所）」は半角スペースが原則です。
VSCode利用者ではないですが、全角スペースが可視化されるような機能はありませんか？
もしくは、HTML構文チェック機能があれば、不正な記述として気づけそうに思います。
line 5: <CANVAS> 内におかしな文字列 ` id=` があります。 line 5: <CANVAS> 内におかしな文字列 `"` があります。
投稿2021/07/11 21:27
編集2021/07/11 21:33総合スコア80892
半角で打ったつもりが確かに全角になっていました。
半角にしたところ、しっかり表示されました。ありがとうございます。
追記してるのでご確認を。
拡張機能に全角を可視化するものがありました。
導入してみます。ありがとうございます。
HTML構文チェックの方が大事そうです。
「意図的に全角スペースを入れる（主に値ですが）」ということもありえるので。
構造チェックを入れてみました。
全角スペースでエラー表示はされませんでしたが、画面の上にタグ(?)が表示されて構造がわかりやすくなりました。
あなたの回答
tips
プレビュー
