Lesson 34. Capstone: Canvas image gallery
Your image gallery will load random images from Unsplash[1] and render them to an HTML canvas element using a fading transition. You’ll use several promises to achieve this. You’ll use a promise and an async function to fetch images. You’ll also use promises to orchestrate the transitions and delay between the images, as well as other wiring that will need to be done.
Note
You’ll start your project using the start folder included in the code accompanying this book. If at any time you get stuck, you can also check out the final folder with the completed code. The start folder is a project already set up to use Babel and Browserify (see unit 0); you just need to run npm install to get set up. If you haven’t read unit 0, you should do so before proceeding with this capstone.
There’s also an included index.html file, which is where the app will run. It already includes all the HTML and CSS it needs, so you just need to open it in a browser once you bundle your JavaScript files. The src folder is where you’ll put all your JavaScript files. The dest folder is where the bundled JavaScript file will go after you run npm run build. You’ll need to remember to run npm run build to compile your code anytime you make a change.