Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

· Web Dev Zone
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.


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.


Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}