Canvas deployment

The iframe is the wrapper.

Composer-generated games are self-contained HTML files. Publish the game at a public HTTPS URL, then point Canvas directly at that URL. No second game wrapper file is required.

Publish the GameCopy the Iframe Pattern

Step 1

Publish the generated HTML with GitHub Pages

GitHub Pages is a convenient static host. Another HTTPS static host works too.

  1. 01

    Extract the composer ZIP

    Find the generated game HTML. Keep the recipe, manifest, and README for your records.

  2. 02

    Rename the game to index.html

    This is not required, but it gives you the cleanest public URL. If you keep the generated file name, the public URL simply needs to include that file name.

  3. 03

    Create or open the GitHub repository

    Upload index.html to the publishing root and commit the file.

  4. 04

    Turn on GitHub Pages

    In the repository, open Settings → Pages, choose Deploy from a branch, select the main branch and the root folder, then save.

  5. 05

    Test the public URL

    Open the Pages URL in a private browser window. Confirm the title screen, enabled modes, questions, graphs, mobile layout, local saving where applicable, and results.

Step 2

Point Canvas directly at the public game URL

Create or edit a Canvas page, switch to the HTML editor, and paste an iframe using your hosted URL.

<iframe
  src="https://YOURUSERNAME.github.io/YOUR-REPO/"
  width="100%"
  height="900"
  style="border:0;"
  loading="lazy"
  allowfullscreen>
</iframe>
01

Replace the URL

Use the public GitHub Pages address for the game. Do not use a local file path or the GitHub repository editing URL.

02

Adjust the height if needed

900 pixels is a practical starting point. Increase it if your Canvas theme creates unnecessary internal scrolling.

03

Use Student View

Verify the page as a student. Test desktop and mobile. Make sure the game is not blocked by institutional iframe or content-security settings.

No separate wrapper file: the hosted index.html is the game. The Canvas <iframe> embeds that game. That is the whole chain.

Before you assign it

Run the final checks before students do.

Mode check

Launch every mode you enabled. Timed Trial should run for the full ten-minute clock; Exam Drill follows its own practice completion path.

Storage check

Progress and run data stay in the learner's browser. Test save/resume only in modes that support it and confirm clearing browser data behaves as expected.

Evidence check

If students must submit a result screenshot, mastery report, verification code, CSV, or other course evidence, state that requirement explicitly in Canvas.

Download the Quick Start GuideOpen Faculty Guides