前提・実現したいこと
html、Javascriptでお絵かきボードを作っております。
キャンバスに絵を描きたいのですが、うまく表示されません。
問題解決できる方、ご回答のほどよろしくお願い致します。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
canvas.html:14 Uncaught TypeError: Cannot read property 'getContext' of null
at canvas.html:14
該当のソースコード
<!DOCTYPE html> <html> <head> <title>お絵かきボード</title> </head> <body> <p><canvas id="paintr" width="490" height="300" style="border:2px solid #999;"></canvas></p> <script type="text/javascript"> HTMLCanvasElement.prototype.clearPaintr=function(){ this.getContext('2d').fillStyle="#eee"; this.getContext('2d').fillRect(0,0,this.width,this.height); } var canvas=document.getElementById('Paintr'); var ctx=canvas.getContext('2d'); var drawState=false; canvas.clearPaintr(); ctx.lineWidth=7; function start(event){ ctx.beginPath(); drawState=true; } function stop(event){ if(drawState){ ctx.closePath(); drawState=false; } } function update(event){ if(drawState){ ctx.lineTo(event.offsetX||event.layerX,event.offsetY||event.layerY); ctx.stroke(); } } canvas.addEventListener("mousedown",start,false); canvas.addEventListener("mouseup",stop,false); canvas.addEventListener("mousemove",update,false); addEventListener("mouseup",stop,false); </script> </body> </html>補足情報(FW/ツールのバージョンなど)
html
Atom 1.38.2 64bit
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/10 10:39