Canvas Doesn't Work for Teachers

Because the Canvas LMS (Learning Management System) is afraid to give teachers the power to control the way their classes are run, and the way their web pages look, they remove the ability for faculty to add style-sheets to their pages. This is an insult to faculty! Their excuse, when they bother to give one, is accessibility - stuff and nonsense, I say. I know how to make my html accessible, trust me to do it on my own, rather than force me to conform to Canvas's poorly designed pages.

So, to work around this, I've found a loophole in Canvas, namely, the <iframe> tag. Here's the trick, create a new Page in Canvas by choosing Pages from the left-hand list on the Home page, then click the View All Pages button in the upper left, then click + Page in the upper right. This will create a new blank page and take you to a mediocre WYSYWIG editor:

Click on the HTML Editor button in the upper right

And here's where we fool Canvas. Create an iframe tag with these conditions:

width=3000 to fool the Canvas page to fill the width of the page
height=2000 will put a scroll bar on the left side of the Canvas page for your content
src=https://somewhere.com/yourhtmlcode.htm - THIS MUST BE TO A SECURE HTTPS SERVER TO WORK, otherwise Canvas won't display the page
You don't have to put the <p></p> tags in, Canvas puts them in for you (without asking, which is rude to say the least, but that's Canvas for you...)

The iFrame HTML

Once you host your own html page and embed it into the Canvas page with an iframe, you can do what you like. Just create an html page that works for you, upload it to the secure server location, and link it into the iframe. Myself, I borrow Canvas's CSS and add to it with my own style sheet by putting the appropriate links in the head of my html doc. Here's what mine looks like:

<!doctype html> 
<html>

<head> 

<meta charset="UTF-8"> <title>How To Embed HTML in Canvas</title> 
<!-- favicons for canvas -->
<link rel="shortcut icon" type="image/x-icon" href="https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico" />
 
<link rel="apple-touch-icon" href="https://du11hjcvx0uqb.cloudfront.net/dist/images/apple-touch-icon-585e5d997d.png" />
<!-- Canvas's CSS for Pages -->
<link rel="stylesheet" media="all" href="https://du11hjcvx0uqb.cloudfront.net/dist/brandable_css/new_styles_high_contrast/bundles/common-e9dfa2b819.css" />
<!-- Google fonts that match Canvas's --> 
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet"> 

<!-- font awsome icons, 'cause they're handy --> 
<script src="https://use.fontawesome.com/7bbc3b58c7.js"></script> 
<!-- font awsome html format: <span class="fa fa-arrow-right"></span> -->
 
<!-- Custom CSS up on secure server --> 
<link rel="stylesheet" type="text/css" href="https://accounts.smccd.edu/khazarj/canada/canvas_canada_pagestyles.css" /> 

<!-- Local CSS for editing --> 
<link href="../../canvas_canada_pagestyles.css" rel="stylesheet" type="text/css"> 

</head>

And it's yours to meddle with from there. Feel free to use my CSS stylesheets, but be warned that they could change at any time. Best to download them and host them yourself.