Advanced CSS and JavaScript/jQuery in Canvas

[NatFeibish]

Hi, Friends.

I come to Canvas as a webdev with a lot of WordPress experience. I'm piecing together a design library for my organization and want to include foundational components as well as a few fun things. Much of what I'm doing is going to be stored in Figma with the CSS being pulled into Canvas.

Thing is, while I've worked with Canvas, I don't really know the limitations of what Canvas supports in terms of these technologies. I understand that I can upload JavaScript and CSS, and that there is some jQuery support, but I'm sure where the boundaries are. Where can I go to find out more about this?

My next steps will include creating a sandbox course to try things out in, but I'm hoping for a more rapid learning curve. 

Huge thanks in advance.

[kirsten_naughto]

There are a lot of fun things you can do in Canvas especially if you have the ability to work with external CSS and JS files. Keep in mind that while jQuery works on the web, the mobile app does not support anything done in jQuery and requires its own separate code files. For a good student experience, that needs to be considered, however it sounds like you have the experience to build things the students will visually enjoy while they are learning.

The best way I've found to learn is to identify several things of high value that can be easily re-usable, create them, and then let the instructional designers and course authors use them (and try to break them). The sandbox course is something I spend many hours in as well as our test instance of Canvas. Once something has been tested, we make sure it's scalable and then put it into mainstream production. You'll hear pretty quickly if something is broken. There is a learning curve, but the best and most fun way is to just get in and try it.

The best resources are here in the community so do some searching on jquery and whatever else you are considering. Odds are someone has posted something. I always find the best information and links to additional here.

[michael5]

You can do a lot if you have administrative access. In my experience, the most common issues you run into are (1) scoping, (2) cross-origin iframes and (3) disabling features.

1. Scoping: When editing, adding or removing elements here and there, you'll quickly find that a change to any CSS or HTML class or id can have wide, unpredictable consequences for the rest of the Canvas instance. These can range from trivial to severe so I'd recommend good test procedures. You will probably be surprised. Take time to familiarize yourself with how Canvas works by studying each element in the DOM and on different pages/levels of the system.

2. Cross-origin frames: A thing I struggled with a lot was actually upgrading the content of regular content pages, assignments and quizzes to be more fun and stimulating. The Rich Content Editor (that you use to write text for pages, assignments and quizzes) allows you to view and write HTML, but what you can do here is severely limited. So you'll probably end up trying to use iframes for content pretty soon but if you try to do anything with the iframes short of showing them, you'll get a cross-origin error. So just a heads-up: do not go down the iframe rabbit hole for advanced content. Instead, add classes to elements directly in the Rich Content Editor and add behavior later/externally by uploading CSS/JS. Give your teachers code snippets to copy paste if they're not comfortable adding classes to their own content.

3. Disabling features: A thing that might end up frustrating a lot is the inability to disable features entirely. Don't get me wrong, you can do a lot on the admin side but most of the time, you'll end up hiding features rather than disabling them. This is pretty common practice in my experience.

Also, read the API and use it as much as you can. You can do so many hacky solutions using JS/CSS uploads but you really will get much better performance and reliability if you have at least some familiarity with how to work the API. If you don't know where something is in the API, my recommendation is - surprise - ChatGPT. Ask it how to do something specifically with the Canvas API, it really is very, very good at pointing you to the correct end-point for whatever you're trying to achieve.

Happy coding. 🙂