Flood fill - image transition effect

In just 16 lines of vanilla JavaScript you can recreate this simple image transition effect and practice your bitmap skills on the HTML5 Canvas.

Let's start with a simple version with just one image:

<html>

<body>

let image = new Image();

image.src = "example1.jpg";

let canvas = document.getElementById("myCanvas");

let context = canvas.getContext("2d");

let row, imageWidth, imageHeight;

image.onload = function() {

imageWidth = image.width;

imageHeight = image.height;

row = imageHeight;

requestAnimationFrame(animate);

};

function animate() {

context.drawImage(image, 0, row, imageWidth, 1, 0, 0, imageWidth, row);

if (row > 0) row--;

else

row = imageHeight;

requestAnimationFrame(animate);

}

</script>

</body>

</html>

Here's how it works:

[5-6] set up the source image, which is not visible on the screen.
[7-8] set up the target Canvas
[11-13] once the image is loaded, get its dimensions
[15] start the animation

[18-24] The animation function is where all the action is and [19], which draws the 'falling block' is the most complicated part, so let's look at it in more detail:
It copies one row (a horizontal stripe with the height of one pixel) of the source image and puts it on top of the target Canvas, but stretches it vertically: its height is equal the value of 'row' .
In short, it copies a bitmap at coordinates (0,row) and size of (imageWidth, 1) from the source and pastes it at (0,0) with dimensions (imageWidth,row) to the destination.
The value of the variable 'row' starts equal to the height of the image [14] and then is reduced in every iteration.
You can read here about the drawImage function works.

It's easier to see it with an example. Let's say this is our source picture:

1
2
3
4
5

(the numbers correspond to the row numbers, so let's pretend our picture is only 5 pixels high)
The part drawn in the given iteration below is in red.

In the first iteration 'row' equals 5, so the code takes the lowest row from the source and puts it in all the rows of the target.

5
5
5
5
5

2nd iteration, row = 4. It takes row 4 from source and puts it in the top 4 rows of target:

4
4
4
4
5

3rd iteration:

3
3
3
4
5

4th:

2
2
3
4
5

And finally in the 5th iteration we copy the top row and the image is complete:
1
2
3
4
5

Back to our code: [20-23] decreases the value of 'row' and resets it to the bottom if the entire picture has been drawn.

Now for the full version of the code - with a couple of extra lines, we add an array of images [5-9] and the toggling mechanism [28-31]:

<html>

<body>