スクラッチくじ風報酬演出

<div class="d09-06-07-box">
          <div class="d09-06-07-card">
            <div class="d09-06-07-reward">
              <svg viewBox="0 0 24 24" width="26" height="26" fill="none"><path d="M12 3l2.6 5.9 6.4.6-4.9 4.2 1.5 6.3L12 16.7 6.4 20l1.5-6.3-4.9-4.2 6.4-.6z" fill="#f59e0b"/></svg>
              <span>ポイント+500獲得</span>
            </div>
            <canvas class="d09-06-07-canvas" width="240" height="120"></canvas>
          </div>
          <p class="d09-06-07-hint">なぞって削ろう</p>
        </div>

.d09-06-07-box{display:flex;flex-direction:column;align-items:center}
        .d09-06-07-card{position:relative;width:240px;height:120px;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.12)}
        .d09-06-07-reward{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
          background:linear-gradient(135deg,#fff7ed,#fef3c7);font-size:13px;font-weight:700;color:#92400e}
        .d09-06-07-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;touch-action:none}
        .d09-06-07-hint{margin-top:10px;font-size:11.5px;color:#94a3b8;text-align:center}

(function(){
        var root=document.getElementById('item-09-06-07');
        if(!root)return;
        var canvas=root.querySelector('.d09-06-07-canvas');
        var ctx=canvas.getContext('2d');
        function paint(){
          ctx.clearRect(0,0,canvas.width,canvas.height);
          var g=ctx.createLinearGradient(0,0,canvas.width,canvas.height);
          g.addColorStop(0,'#cbd5e1');g.addColorStop(1,'#94a3b8');
          ctx.fillStyle=g;ctx.fillRect(0,0,canvas.width,canvas.height);
          ctx.fillStyle='#475569';ctx.font='bold 15px sans-serif';ctx.textAlign='center';
          ctx.fillText('ここを削る',canvas.width/2,canvas.height/2+5);
        }
        paint();
        var drawing=false;
        function erase(x,y){
          ctx.globalCompositeOperation='destination-out';
          ctx.beginPath();ctx.arc(x,y,16,0,Math.PI*2);ctx.fill();
          ctx.globalCompositeOperation='source-over';
        }
        function pos(e){
          var r=canvas.getBoundingClientRect();
          var p=e.touches?e.touches[0]:e;
          return{x:(p.clientX-r.left)*(canvas.width/r.width),y:(p.clientY-r.top)*(canvas.height/r.height)};
        }
        canvas.addEventListener('pointerdown',function(e){drawing=true;var p=pos(e);erase(p.x,p.y);});
        canvas.addEventListener('pointermove',function(e){if(!drawing)return;var p=pos(e);erase(p.x,p.y);});
        window.addEventListener('pointerup',function(){drawing=false;});
      })();