検証コードケースのjs実装

入力{
            幅: 200ピクセル;
            高さ: 32px;
            境界線: 1px実線 #000;
            ボックスのサイズ: 境界線ボックス;
        }
        #c1{
            垂直位置合わせ: 中央;
            ボックスのサイズ: 境界線ボックス;
            カーソル: ポインタ;
        }
        #ボタン{
            表示: ブロック;
            上マージン: 20px;
            高さ: 32px;
            フォントサイズ: 16px;
 
        }

<div class="code">
        <input type="text" value="" id="inputValue" placeholder="確認コードを入力してください（大文字と小文字は区別されません）">
        <canvas id="c1" width="100" height="30" style="border:1px solid black"></canvas>
        <br>
        <button id="btn">送信</button>
</div>

$(関数(){
            //ランダムな検証コードを保存する var showNum = []
 
            描画(表示数)
 
            $("#c1").click(関数(){
                描画(表示数)
            })
            $("#btn").click(関数(){
                var s = $("#inputValue").val().toLowerCase()
                var s1 = showNum.join("")
                s==s1の場合{
                    alert("送信に成功しました")
                }それ以外{
                    alert("認証コードエラー")
                }
                描画(表示数)
            })
 
 
            // キャンバスにランダムな検証コードをカプセル化する function draw(showNum){
                // キャンバスを取得
                var キャンバス = $("#c1")
                var ctx = キャンバス[0].getContext("2d")
                // キャンバスの幅と高さを取得します var canvas_width = canvas.width()
                var キャンバスの高さ = キャンバスの高さ()
                // 以前に描画した内容をクリアします // 0,0 クリアする開始座標 // 四角形の幅と高さ ctx.clearRect(0,0,canvas_width,canvas_height)
                // 描画を開始します var scode = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,"
                var arrCode = scode.split(",")
                var arrLength = arrCode.length
                (var i = 0;i<4;i++){
                    var インデックス = Math.floor(Math.random()*arrCode.length)
                    var txt = arrCode[index] // ランダムに文字を選択します showNum[i] = txt.toLowerCase() // 小文字に変換して検証コード配列に格納します // 文字の描画位置の制御を開始します var x = 10 +20*i // 各検証コード描画の開始点の x 座標 var y = 20 + Math.random()*8 // 開始点の y 座標 ctx.font = "bold 20px Microsoft YaHei"
                    // 文字の回転を開始します var deg = Math.random*-0.5
                    // 描画されたコンテンツを傾ける効果を得るには、まずキャンバスを平行移動する必要があります。目的は、回転ポイントをコンテンツが描画される場所に移動することです。ctx.translate(x,y)
                    ctx.rotate(度)
                    // 描画のランダムな色を設定する ctx.fillStyle = randomColor()
                    ctx.fillText(txt,0,0)
 
                    // キャンバスを復元する ctx.rotate(-deg)
                    ctx.translate(-x,-y)
 
                }
                (var i = 0;i<30;i++){
                    もし(i<5){
                        // 線を描く ctx.strokeStyle = randomColor()
                        ctx.beginPath()
                        ctx.moveTo(Math.random()*canvas_width,Math.random()*canvas_height)
                        ctx.lineTo(Math.random()*canvas_width,Math.random()*canvas_height)
                        ctx.ストローク()
                    }
                    // ポイントを描画 ctx.strokeStyle = randomColor()
                    ctx.beginPath()
                    var x = Math.random()*canvas_width
                    var y = Math.random()*canvas_height
                    ctx.moveTo(x,y)
                    ctx.lineTo(x+1,y+1)
                    ctx.ストローク()
 
                }
 
 
            }
 
            // ランダムカラー関数 randomColor(){
                var r = Math.floor(Math.random()*256)
                var g = Math.floor(Math.random()*256)
                var b = Math.floor(Math.random()*256)
                `rgb(${r},${g},${b})` を返す
 
            }
 
        })