js implementation of verification code case

input{
            width: 200px;
            height: 32px;
            border: 1px solid #000;
            box-sizing: border-box;
        }
        #c1{
            vertical-align: middle;
            box-sizing: border-box;
            cursor: pointer;
        }
        #btn{
            display: block;
            margin-top: 20px;
            height: 32px;
            font-size: 16px;
 
        }

<div class="code">
        <input type="text" value="" id="inputValue" placeholder="Please enter the verification code (not case sensitive)">
        <canvas id="c1" width="100" height="30" style="border:1px solid black"></canvas>
        <br>
        <button id="btn">Submit</button>
</div>

$(function(){
            //Store random verification code var showNum = []
 
            draw(showNum)
 
            $("#c1").click(function(){
                draw(showNum)
            })
            $("#btn").click(function(){
                var s = $("#inputValue").val().toLowerCase()
                var s1 = showNum.join("")
                if (s==s1) {
                    alert("Submission successful")
                }else{
                    alert("Verification code error")
                }
                draw(showNum)
            })
 
 
            // Encapsulate a random verification code on the canvas function draw(showNum){
                // Get canvas
                var canvas = $("#c1")
                var ctx = canvas[0].getContext("2d")
                // Get the width and height of the canvas var canvas_width = canvas.width()
                var canvas_height = canvas.height()
                // Clear the previously drawn content // 0,0 The starting coordinates to be cleared // The width and height of the rectangle ctx.clearRect(0,0,canvas_width,canvas_height)
                // Start drawing 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
                for(var i = 0;i<4;i++){
                    var index = Math.floor(Math.random()*arrCode.length)
                    var txt = arrCode[index] //Randomly select a character showNum[i] = txt.toLowerCase() //Convert to lowercase and store in verification code array //Start to control the drawing position of the character var x = 10 +20*i //The x coordinate of the starting point of each verification code drawing var y = 20 + Math.random()*8 //The y coordinate of the starting point ctx.font = "bold 20px Microsoft YaHei"
                    // Start rotating the character var deg = Math.random*-0.5
                    // To achieve the effect of tilting the drawn content, the canvas must be translated first, the purpose is to move the rotation point to the place where the content is drawn ctx.translate(x,y)
                    ctx.rotate(deg)
                    // Set the random color of the drawing ctx.fillStyle = randomColor()
                    ctx.fillText(txt,0,0)
 
                    // Restore the canvas ctx.rotate(-deg)
                    ctx.translate(-x,-y)
 
                }
                for(var i = 0;i<30;i++){
                    if (i<5) {
                        // Draw line 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.stroke()
                    }
                    // Draw points 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.stroke()
 
                }
 
 
            }
 
            // Random color function randomColor(){
                var r = Math.floor(Math.random()*256)
                var g = Math.floor(Math.random()*256)
                var b = Math.floor(Math.random()*256)
                return `rgb(${r},${g},${b})`
 
            }
 
        })