Текст и анимация вместе на холсте HTML5

Каждый раз, когда вы перерисовываете холст, вам нужно перерисовывать текстовое поле, я лично переименовываю «clicked()» и вызываю его изнутри «draw()» (до или после капель в зависимости от того, хотите ли вы, чтобы он отображался выше или ниже )

Вам также придется удалить ctx.clearRect() из «clicked()», иначе он перезапишет дождь (если вы поместите его сверху)

Затем вам нужно будет отредактировать, как он был вызван, функция clicked() может установить логическую переменную, которая проверяется внутри функции рисования (и, если это правда, рисует текстовое поле)

Пример псевдокода:

var text = false
draw(){
    drawRain()
    if(text == true){drawText()}
}
clicked(){
    text = true
}

Затем, если вы хотите, чтобы текстовое поле было редактируемым, вы можете использовать переменные вместо фиксированных значений в drawText(), например.

Вне drawText()

fontVar = "36px Verdana";
fillColour = "yellow";
strokeColour = "green";

Внутри DrawText()

ctx.font=fontVar;
ctx.fillStyle=fillColour;
ctx.strokeStyle=strokeColour;

Ответ на этот вопрос кроется в укладке двух слоев полотна. Первый слой Canvas будет иметь фоновое изображение и эффект анимации. Второй слой поверх него будет рисовать текст. Примечание. Спасибо @DBS за поиск решения.

JavaScript:

script type="text/javascript">
var ctx;
var ctx2
var imgBg;
var imgDrops;
var x = 0;
var y = 0;
var noOfDrops = 20;
var fallingDrops = [];
var intV;
fontVar ="36px Verdana";
fillColour="yellow";
strokeColour="green";

imgBg = new Image();
imgBg.src = "image.jpg";
var canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
ctx.drawImage(imgBg,0,0,600,400); //Background

var canvas2 = document.getElementById('drawText');
ctx2 = canvas2.getContext('2d');

function drawing(){
ctx.drawImage(imgBg,0,0,600,400); //Background
}

function draw() {
    ctx.drawImage(imgBg, 0, 0,600,400); //Background    
    for (var i=0; i< noOfDrops; i++)
    {

    ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y,35,35); //The rain drop

    fallingDrops[i].y += fallingDrops[i].speed;
    fallingDrops[i+7].x += fallingDrops[i].speed-1;//Set the falling speed
    if (fallingDrops[i].y > 400) {  //Repeat the raindrop when it falls out of view
        fallingDrops[i].y = -120; //Account for the image size
        fallingDrops[i].x = Math.random() * 600;    //Make it appear randomly along the width    
        }
    }       
}


function setup() {

    intV = setInterval(function(){draw()}, 36);
    for (var i = 0; i < noOfDrops; i++) {
        var fallingDr = new Object();
        fallingDr["image"] =  new Image();
        fallingDr.image.src = "Rain.svg";       
        fallingDr["x"] = Math.random() * 600;
        fallingDr["y"] = Math.random() * 5;
        fallingDr["speed"] = 3 + Math.random() * 5;
        fallingDrops.push(fallingDr);

        }
}
function start(){
setup();
}

function stop(){
    clearInterval(intV);
}

function clicked(){
    z=document.getElementById("form_val");
    ctx2.clearRect(0,0,600,400);
    ctx2.font=fontVar;
    ctx2.fillStyle=fillColour;
    ctx2.strokeStyle=strokeColour;
    ctx2.lineWidth=2;
    ctx2.strokeText(z.value,200,200);
    ctx2.fillText(z.value,200,200);
}

</script>

HTML

<div class="wrapper">
<canvas id="myCanvas" width="600" height="400" style="margin:1px;"></canvas>
<canvas id="drawText" width="600" height="400" onmouseover="start()" onmouseout="stop()</canvas>
</div>
<br>
Greeting Message: <input type="text" name="fname" size="50" id="form_val">
<button id="submit" onclick="clicked()">Add this message</button>
</div>

CSS

Как я могу сложить два одинаковых холсты друг на друга?