Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.

Premium Features

Download Video

Maintaining the Canvas' Size On Refresh

Published 4 months ago

Some of you may have noticed, even though a hard refresh always gives our canvas the correct dimensions, a normal refresh sometimes shoves our canvas towards the top right-hand corner of the screen, shrinking it in the process.

Although not a deal breaker, it is quite an annoying effect to develop with, so before we go any further we'll go ahead and fix it.

This issue is caused by loading tailwind.css directly within our Vite's index.html file. When developing with Vite, the bundler performs some caching magic behind the scenes, running our JavaScript before completely loading a big file like Tailwind.css. Although this is useful for instant JavaScript updates, it obviously provides the issue of shrinking our canvas when it is reliant on some Tailwind classes meant to maintain its width and height.

We can fix this by simply commenting out the <link> tag importing Tailwind within index.html, and importing ./tailwind.css within main.js.


Want to participate?

Create a free Chris Courses account to begin

andy posted 3 months ago
chris posted 3 months ago
Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.