This tutorial shows you how you can use the CodeHS Graphics JavaScript library outside of CodeHS on any website.
You can run any of your CodeHS JavaScript programs inside the CodeHS Sandbox OR embedded inside of an HTML page.
This tutorial walks you through how you can take a JavaScript Graphics program and embed it inside your webpage.
The first thing you need to do is make an HTML Program. You can do this either in the CodeHS Sandbox or locally on your computer by making a file named index.html
.
index.html
Below is the boilerplate code that creates the basics of a skeleton for your website.
This HTML code includes the CodeHS JavaScript library (located at https://cdn.codehs.com/chs-js-lib/0.2.21/dist/chs.iife.js
), a canvas
element for drawing graphics, and an empty script
tag where you’ll place your code.
The order of the elements here is important: the <script>
loading the JavaScript library must come after the canvas
, and the <script>
containing your code must come after that.
The final step is to put your JavaScript code into that final <script>
tag. For example, you might have a script like this:
Here’s an example showing a full HTML program for running JavaScript Graphics outside of CodeHS. We’ve hosted it in CodeHS, but this HTML will work on any site!