到达屏幕末端后如何隐藏动态创建的画布对象

Question

我通过在指定的时间间隔内克隆它们来动态创建HTML5 canvas对象。 现在，我需要让它们每个都在到达屏幕末端后消失。 这是我用来创建画布对象的代码。 HTML代码

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>

<br><br>
<script src="myjs1.js"></script>         
<canvas id="test" class="test"></canvas>          
</body>
</html>

MYJS1.JS文件

$(document).ready(function(){

var c = document.getElementById("test");
var ctx=c.getContext("2d");
var h=ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';    
ctx.fillRect(20, 20, 150, 100);
    ctx.font="30px Arial";

    ctx.fillText(0,250,75);
            ctx.stroke();



setInterval(function() {
     var el = $("#test"),  
     newone = el.clone(true);
     el.before(newone);


},5000);

var i=0;

setInterval(function() {
    i++;
var e = document.getElementById("test");
var ctx2 = e.getContext("2d");
ctx2.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';    
ctx2.fillRect(20, 20, 150, 100);

        ctx2.font="30px Arial";
    ctx2.fillText(i,250,75 );
    ctx2.stroke();
},5000);
}); 

如果我使用以下代码，则它将在给定条件后停止创建块，而不是使第一个创建的块消失。

if(i>10){
$('#test:first').remove();
}

'#test:last'也给出相同的结果。 有人可以帮我吗。