Please enable JavaScript to use CodeHS

JavaScript Tutorial

How to use the CodeHS JS Library on your Website 2

This tutorial shows you how you can use the CodeHS Graphics JavaScript library outside of CodeHS on any website.

By Andy Bayer

Software Developer at CodeHS

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.

Step 1: Create an HTML program

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.

Step 2: Paste the Boilerplate Code into index.html

Below is the boilerplate code that creates the basics of a skeleton for your website.

<html>
  <head>
  </head>
  <body>
    <canvas width="400" height="480"></canvas>
    <script src="https://cdn.codehs.com/chs-js-lib/0.2.21/dist/chs.iife.js"></script>
    <script>
      // put your code here!
    </script>
  </body>
</html>
HTML

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.

Step 3: Insert Your JavaScript Code

The final step is to put your JavaScript code into that final <script> tag. For example, you might have a script like this:

<script>
let circle = new Circle(20);
add(circle);
</script>
HTML

Example

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!