JS Canvas, How to make an image slowly disappear?

Here is the code I have for now:

<!DOCTYPE html>
<html>
<head>
<style>
canvas{border:#666 2px solid; }
</style>

</head>
<body>
<canvas id="canvas1" width="1650" height="825" style="width: 650px; height: 330px;"></canvas>
<script>
var canvas,ctx,x,y,w,e;

    var slikeURL = [
    "https://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png",
    "http://www.jasonjsmith.com/img/small-business-seo.jpg",
    "https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png"
    ]

var slike = slikeURL.map(url=>{var img = new Image(); img.src = url; return img});
function start_canvas()
{
var brojac = 0;
function draw() 
{
  ctx.drawImage(slike[brojac], x, y);
};

function draw1(w, e) 
{
  ctx.drawImage(slike[brojac], w, e);
};

function update(time)
{
    ctx.clearRect(0,0,canvas.width,canvas.height);
    if(w >= x)
    {
        e += 8;
        y += 8;
    }
    else
    {   
        x -= 4;
        w += 4;
    };
    if(slike){
        ctx.drawImage(slike[brojac], x, y);
        ctx.drawImage(slike[brojac], w, e);
              }
    if (e > canvas.height) 
    {
        brojac = (brojac + 1) % slike.length;
        x = canvas.width-190;
        y = 15;
        w = 1;
        e = 15;
    }
    requestAnimationFrame(update)
};
canvas = document.getElementById('canvas1');

    x = canvas.width-190;
    y = 15;
    w = 1;
    e = 15;

    ctx = canvas.getContext('2d');
    requestAnimationFrame(update)
}
window.addEventListener("load",start_canvas);
document.write(brojac);
</script>
</body>
</html>

What I want to happen is that the last two images in the cycle start to slowly disappear (NOT fade out). Here are a few simple images of what I had in mind.

I want the two images to move towards each other like they normally move in the code, but the moment a part of an image crosses the invisible line, that part gets deleted until the whole image disappears, and then the cycle starts over.

I did try to crop the image while it is moving, but I wasn't able to make that work. Any ideas how I can make this?

Solution

Simply add an extra clearRect() for the region you want to hide when the criteria (image index) is fulfilled.

var canvas,ctx,x,y,w,e;

    var slikeURL = [
	"https://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg",
    "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png",
    "http://www.jasonjsmith.com/img/small-business-seo.jpg",
    "https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png"
	]

var slike = slikeURL.map(url=>{var img = new Image(); img.src = url; return img});
function start_canvas()
{
var brojac = 0;
function draw() 
{
  ctx.drawImage(slike[brojac], x, y);
};

function draw1(w, e) 
{
  ctx.drawImage(slike[brojac], w, e);
};

function update(time)
{
    ctx.clearRect(0,0,canvas.width,canvas.height);
    if(w >= x)
	{
        e += 8;
        y += 8;
    }
	else
	{	
        x -= 4;
        w += 4;
    };
    if(slike){
        ctx.drawImage(slike[brojac], x, y);
        ctx.drawImage(slike[brojac], w, e);
      if (brojac > 0) ctx.clearRect(412,0,824,ctx.canvas.height);
			  }
    if (e > canvas.height) 
	{
	    brojac = (brojac + 1) % slike.length;
        x = canvas.width-190;
        y = 15;
        w = 1;
        e = 15;
    }
    requestAnimationFrame(update)
};
canvas = document.getElementById('canvas1');

    x = canvas.width-190;
    y = 15;
    w = 1;
    e = 15;

    ctx = canvas.getContext('2d');
    requestAnimationFrame(update)
}
window.addEventListener("load",start_canvas);
document.write(brojac);

canvas{border:#666 2px solid; }

<canvas id="canvas1" width="1650" height="825" style="width: 650px; height: 330px;"></canvas>

(adjust region as needed).