Recreating the "Doom" Screen Transition Effect with JavaScript and Canvas

This is a cool blog post that walks you through one developer's method for recreating the screen transition effect in the classic video game "Doom" using JavaScript and a <canvas> element.

The author, Jason Brown, achieves this effect using a standard drawImage with offsets. He uses a background image and a foreground image in columns offset in the y direction.

He created a canvas element in memory in which to draw the images, defined the height of the columns and set a fallSpeed transition for the columns.

You can read the original blog post here for a more detailed description including code snippets, and you can check out the codepen here.

Also, if you're interested in seeing how the original Doom developers implemented the screen-wipe effect, you can check out the relevant source code on GitHub.