スクラッチ宝くじの例を実現する JavaScript キャンバス

<div class="ggk">
        <span id="span">200元</span>
        <キャンバスid="キャンバス"></キャンバス>
</div>

.ggk {
            幅: 200ピクセル;
            高さ: 100px;
            境界線: 1px実線 #000;
            マージン: 20px 自動;
            色: 赤;
            位置: 相対的;
        }
 
        .ggk スパン {
            位置: 絶対;
            幅: 100%;
            高さ: 100%;
            テキスト配置: 中央;
            フォントサイズ: 50px;
            行の高さ: 100px;
        }
 
        #キャンバス {
            位置: 絶対;
            左: 0;
            上: 0;
        }

var キャンバス = document.getElementById("キャンバス")
        初期化()
        関数init() {
            キャンバスの幅 = 200;
            キャンバスの高さ = 100;
            var ctx = canvas.getContext("2d")
            // グレーのレイヤーでカバーする ctx.save();
            ctx.fillStyle = 'rgb(100,100,100)'
            ctx.fillRect(0, 0, 200, 100)
            描画(ctx)
            プロ()
        }
 
        // ランダムコンテンツ function pro() {
            var span = document.getElementById("span")
            var arr = ["100元", 'ご愛顧ありがとうございます', '200元', 'ご愛顧ありがとうございます', 'ご愛顧ありがとうございます', 'ご愛顧ありがとうございます', '500万', 'ご愛顧ありがとうございます']
            var num = Math.floor(Math.random() * (arr.length - 1))
            var テキスト = arr[数値]
            span.innerHTML = テキスト
        }
 
        関数draw(ctx){
            //クリックイベント canvas.onmousedown = function(e){
                // 移動イベント var downX = e.offsetX
                var 下Y = e.offsetY
                ctx.beginPath()
                // ctx.globalCompositeOperation = 'destination-out'
                ctx.lineWidth = 10;
                ctx.moveTo(下X、下Y)
 
                キャンバス.onmousemove = 関数(e){
                    var x = e.offsetX
                    var y = e.offsetY
                    // ctx.lineTo(x,y)
                    ctx.clearRect(x,y,20,20)
                    ctx.ストローク()
 
                }
            }
            // マウスポップアップイベント canvas.onmouseup = function(){
                キャンバス.onmousemove = null
            }
        }