如何在背景图像中嵌入字符串？

Question

我正在尝试制作看起来像

的刮刮卡

基本上我有一个灰色图层可以划伤，它会显示红色图像。

现在我已经设置了画布，而ctx用于灰色层，但背景是固定的。 我希望得到＆＃34; 12345＆＃34;是一个嵌入背景的变量， 这意味着我可以在背景图像中使用不同的数字。

这是刮刮卡的功能。 （addEventlistener仅用于抓取灰色层）

function bodys(height,width){

    var img = new Image();  
    var canvas = document.querySelector('canvas');         
    canvas.style.position = 'absolute';  
    img.addEventListener('load',function(e){  
        var ctx;
        var w = width, h = height;

        var offsetX = canvas.offsetLeft, offsetY = canvas.offsetTop;             
        var mousedown = false; 
        function layer(ctx){                 
            ctx.fillStyle = 'gray';                 
            ctx.fillRect(0, 0, w, h);             
        }   
        function eventDown{
                        ...
        }   


        canvas.width=w;             
        canvas.height=h; 

        canvas.style.backgroundImage='url('+img.src+')';//here is the background image I use              
        ctx=canvas.getContext('2d');         
        ctx.fillRect(0, 0, w, h);

        layer(ctx);               
        ctx.globalCompositeOperation = 'destination-out';     

        canvas.addEventListener{
                             ...
        }

    });