Q&A
ありがとうございます！
無事表示されました！
前提・実現したいこと
プログラミング初心者です。
初歩的な質問で申し訳ございません。
検索を2０件ほどしても分からなかった為、こちらで質問させて下さい。
HTML5のcanvasで画像を表示しようとしたところ、以下のようなエラーメッセージが出て、画像が表示出来ません。
どなたかやり方をご教示頂けますと幸いです。
どうぞよろしくお願い致します。
発生している問題・エラーメッセージ
index.html:20 Uncaught TypeError: Cannot read property 'getContext' of null at index.html:20
(const ctx = board.getContext("2d");)の行でエラーが出ています。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8" /> 5 <title>test</title> 6 7 <style> 8 * { padding: 0; margin: 0; } 9 canvas { border: 1px solid #888; display: block; margin: 0 auto;} 10 </style> 11 12 13</head> 14<body> 15 <canvas id="canvas" width="300" height="500"></canvas> 16 <script> 17 // canvas準備 18 const board = document.getElementById("#canvas"); 19 const ctx = board.getContext("2d"); 20 21 // 画像読み込み 22 const image = new Image(); 23 image.src = "image/01.jpg"; 24 image.onload = () => { 25 ctx.drawImage(image, 0, 0); 26 }; 27 </script> 28</body> 29</html>
試したこと
スクリプトをbodyの一番下に持ってくる
canvasにidをつける
補足情報（FW/ツールのバージョンなど）
Google Chrome バージョン: 83.0.4103.61
回答3件
0
document.getElementById("#canvas"); →document.getElementById("canvas");
投稿2020/05/25 02:47
総合スコア36981
0
ベストアンサー
const board = document.getElementById("#canvas");
ではなく
const board = document.getElementById("canvas");
かと
投稿2020/05/25 02:47
総合スコア5545
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/25 02:52