Q&A
確かに確認してみた結果、canvas変数がnullだったようです。しかしHTML側に
<script src="canvas.js"></script>
の記述を追加して、JavaScriptをもう一度Chromeで実行してみても変化がありませんでした。
###実現したい事
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のソース
HTML
1<canvas id="myCanvas" width="700" height="400"></canvas> 2<script src="canvas.js"></script> 3<div id="canvasmenu"> 4 <div class="menuicon" id="clear">×</div> 5 <div class="menuicon" id="colorf5f5f5">消</div> 6 <div class="menuicon" id="size21">21</div> 7 <div class="menuicon" id="size14">14</div> 8 <div class="menuicon" id="size7">7</div> 9 <div class="menuicon" id="size3">3</div> 10 <div class="menuicon" id="colore91e63" style="background-color:#e91e63"></div> 11 <div class="menuicon" id="colorffeb3b" style="background-color:#ffeb3b"></div> 12 <div class="menuicon" id="colorff4801" style="background-color:#ff4801"></div> 13 <div class="menuicon" id="color536dfe" style="background-color:#536dfe"></div> 14 <div class="menuicon" id="color009688" style="background-color:#009688"></div> 15 <div class="menuicon" id="color00e676" style="background-color:#00e676"></div> 16 <div class="menuicon" id="color555555" style="background-color:#555555"></div> 17 <div class="menuicon" id="alpha10" style="background-color:rgba(255,72,1, 1.0)">10</div> 18 <div class="menuicon" id="alpha6" style="background-color:rgba(255,72,1, 0.6)">6</div> 19 <div class="menuicon" id="alpha3" style="background-color:rgba(255,72,1, 0.3)">3</div> 20 <div class="menuicon" id="alpha1" style="background-color:rgba(255,72,1, 0.1)">1</div> 21</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は同じディレクトリに入れてあります。
回答3件
0
<script src="canvas.js"></script>を</body>の直前で読み込みましょう。
DOM形成後に読み込みが行われるようになります。
投稿2018/08/05 22:34
退会済みユーザー
総合スコア0
0
エラーの内容は、「 null のプロパティ getContext は読み込めません」という意味です。
これは、var ctx = canvas.getContext('2d')の部分で canvas変数がnullであることを示唆しています。
可能なら、この１行前にブレークポイントを設定し、変数の内容を見てみましょう。
原因ですが、提示いただいているコードの中にはないと思います。
おそらく、スクリプトが<canvas id="myCanvas" width="700" height="400"></canvas>の部分より前にあるのではないでしょうか。
スクリプトのvar canvas = document.getElementById('myCanvas');の実行時に canvas タグがまだ読み込まれていないと、返り値は null となり、提示されたエラーが出るはずです。
投稿2018/08/05 09:12
総合スコア1086
0
ベストアンサー
JavaScript冒頭を
js
1(function() {
↓
js
1window.onload = function() {
にしてみるといかがでしょうか。
投稿2018/08/05 09:16
総合スコア80888
window.onload = を追加しても同じエラーメッセージのままでした。
そもそもjs読み込ませる記載入れてなかったんですか。
ひとまずその読み込ませる記述も</body>の直前にしてみてください。
あとはcanvasという変数名を変えてみるとか。（予約語ではないようですが）
window.onloadではなくそのcanvasのonloadにしてみても良いかもしれません。
window.onload = (function(){})()ではなく、
window.onload = function(){} にしないと意味がなかったと思います……
また、以前からエラーメッセージが出ていたということは、head 内でも同じスクリプトを読み込んでいませんか？ そちらでエラーが出てしまうと、以降の処理がすべて中断している可能性があります。
あ、そこかもしれませんね。補足ありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。