javascriptのエラー（Uncaught TypeError: Cannot read properties of null (reading 'getContext')）が消えません

javascriptのエラーを解決できず、原因がわかれば教えていただきたいです。
下記サイトを真似して書いており、jsの最初の4行は別のサイトで調べたcanvasのサイズ指定の内容です。
このサイトのjsをそのままコピペして使っても、同じエラーになってしまうので、このサイトが違っているのか、他の部分で違っているのか分からず困っています。
https://tsuyopon.xyz/2018/09/14/how-to-create-drawing-app-part1/

何卒、よろしくお願いいたします。

【html】
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <h1>読み込みテスト</h1>
    <h1>お絵描きアプリ</h1>
    <div class="canvas_wrapper">
        <canvas id="canvas draw_area"></canvas>
    </div>
    <div><button id="clear_button"></button></div>
引用テキスト
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/script.js"></script>
    
</body>
</html>

【js】

//canvasのサイズ指定（canvasにはwidthとheightの属性が設置されていない）
var w = $('.canvas_wrapper').width();
var h = $('.canvas_wrapper').height();
//対象要素.attr(属性, (変更する値))
$('#canvas').attr('width', w);
$('#canvas').attr('height', h);



//①絵を描くために必要な情報の定義
window.addEventListener('load', function(){
    const canvas = document.getElementById('#draw_area');
    
    //描画機能を有効にする
    const context = canvas.getContext('2d');

    //直前のマウスのcanvas上のx座標とy座標を記録する
    const lastPosition = { x: null, y: null };//nullは「何もない」「値が存在しない」という意味

    //マウスがドラッグされているか（クリックされたままか）判断するためのフラグ
    let isDrag = false;//なぜtrueではない？


//②お絵描きアプリに必要な機能（関数）の定義を行なっている
    //絵を描く
    function draw(x, y){
        if(!isDrag){
            //マウスがドラッグされていなかったら処理を中断する
            return;//空のreturn文は、『undefined』を返す。関数ブロック内で処理を途中で終了したい時に使用する
        }

        //線の状態を定義する
        context.lineCap = 'round';//先端の形状を、丸いラインキャップにする。初期値はbutt(ラインキャップなし)
        context.lineJoin = 'round';//線の接合箇所を丸くする。初期値はmiter（面取りしない）
        context.lineWidth = 5;//線の太さ
        context.strokeStyle = 'black';//色。色・グラデーション・パターン値のいずれかを指定(初期値は#000)

        //書き初めは、lastPosition.x, lastPosition.yの値はnullとなっているため、クリックしたところを開始点としている（←！？）
        //lastPosition.xとlastPosition.yに現在のx,yを記録することで、次にマウスを動かした時に、前回の位置から現在の位置まで線を引くようになる（！？）
        if(lastPosition.x === null || lastPosition.y === null){
            //ドラッグ開始時の線の開始位置
            context.moveTo(x,y);
        } else{
            //ドラッグ中の線の開始位置
            context.moveTo(lastPosition.x, lastPosition.y);
        }
        //context.moveToで設定した位置から、context.lineToで設定した位置までの線を引く。
        // - 開始時はmoveToとlineToの値が同じであるため、ただの点となる。
        // - ドラッグ中はlastPosition変数で前回のマウス位置を記録しているため（！？）、前回の位置から現在の位置までの線（点のつながり）となる
        context.lineTo(x,y);

        //context.moveTo,context.lineToの値を元に実際に線を引く
        context.stroke();
    }    
});

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず、目に付いたところだけですが、IDの指定が合致していないと思います。
（先頭「-」の行は削除、「+」の行は修正）
html

diff
1    <div class="canvas_wrapper">
2-        <canvas id="canvas draw_area"></canvas>
3+        <canvas id="draw_area"></canvas>
4    </div>

diff
1window.addEventListener('load', function(){
2-    const canvas = document.getElementById('#draw_area');
3+    const canvas = document.getElementById('draw_area');
4    
5    //描画機能を有効にする
6    const context = canvas.getContext('2d');
7