Please enable JavaScript to use CodeHS

JavaScript Tutorial

How to use the CodeHS JS Library on your Website

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

By Zach Galant

Co-Founder of CodeHS

<script type="text/javascript" src=https://codehs.com/tutorial/zach/"https://static.codehs.com/gulp/80550f5fc4071985bfef352d04f005ca3de931d3/chs-js-lib/chs.js"> <style> canvas { border: 1px solid black; display: inline-block; vertical-align: top; } pre { border: 1px solid black; display: inline-block; width: 400px; height: 500px; background-color: #F5F5F5; } </style> </head> <body> <h1>Your Program Title</h1> <canvas width="400" height="500" class="codehs-editor-canvas"></canvas> <pre id="console"></pre> <script> window.onload = function() { // Your code goes here if (typeof start === 'function') { start(); } }; </script> </body> </html> ```">

We're going to take this Balloons program and embed it inside a webpage with a title that says "Balloons" above it.


First, this is showing the Balloons program in a JavaScript Graphics IDE so you can see what it looks like.

Step 3: Copy your JavaScript Program into your HTML File

Now, you just need to copy the code for your JavaScript program into index.html where it says // Your code goes here


Here's a sample full HTML program with the Balloons JavaScript program inside of it.