Canvas Enhanced

Inspiration

My inspiration for this is caused by my many hours of using Canvas. There's so many things that have felt missing, many parts of the user experience is high-friction.

The most popular solution to this, BetterCampus (formerly BetterCanvas) became closed source, which in this case, is major security issue for an open-source maintainer like myself; they've also added subscriptions. CanvasRefined, the most popular existing open source solution, is good, it offers a wide variety of feature. When many features are enabled in combination, multiple bugs surface. For example, CanvasRefined supports a lot of variability when customizing the look and feel of the website, but that frequently leads to unredable text or clashing colors.

My tool, Canvas Enhanced, finishes the work started by CanvasRefined. Using it as a base, I completely rewrote the app to look polished an premium. Most sources of complexity have been removed; only the essential, most important options remain. CanvasEnhanced focuses on quality, over quantity.

What it does

It adds a plethora of features to Canvas, including:

• Themes
  • Good built-in themes
  • Light/dark mode
• Add custom themes
• Improved dashboard view
  • Show course grades
  • Dashboard notes
  • Overdue assignments shown for each class card
  • Custom styling of cards
• GPA calculator
• Grade analytics and history
• Quiz safe mode
• Canvas search for all courses/modules/assignments

How we built it

I started with a clone of CanvasRefined. All my edits began after the hackathon. Assisted with AI, I rewrote multiple different parts of the code, including the styles and the settings dialog.

Challenges we ran into

The main challenge was figuring out the 20% of features that supported 80% of people's wishes.

What we learned

There's more webextension-specific small tasks than I expected that contributes to setting the app aprt in terms of quality and polish.

What's next for Canvas Enhanced

Wait for the extensions to be reviewed and allowed on app stores, and take user feedback into consideration. I'd also like to make this a userscript, to make installation quicker.

How to Use

The extension is still pending review in Google Chrome and Firefox Extensions, but right now it's still possible to download the repository and load unpacked, or download the extension archives from the releases page.

Built With

• css
• javascript