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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Chrome

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

HTML5

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

JavaScript

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

解決済

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

aiueoaiueoaiue
aiueoaiueoaiue

総合スコア0

Chrome

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

HTML5

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

JavaScript

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

3回答

0評価

0クリップ

92閲覧

投稿2018/08/05 08:21

編集2022/01/12 10:58

###実現したい事
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

<script src="canvas.js"></script> <canvas id="myCanvas" width="700" height="400"></canvas> <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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

Chrome

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

HTML5

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

JavaScript

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