Please enable JavaScript to use CodeHS

Python Tutorial

How To Use Python Graphics on Your Website

Learn how to use the Brython Python graphics library outside of CodeHS on any website.

By Joi Anderson

Brython is a Python graphics library designed to replace Javascript as the scripting language for the web. This tutorial walks you through how you can take a Brython program and embed it in a webpage.


Step 1: Create an HTML program

Create an HTML file named index.html. You can do this either in the CodeHS Sandbox by creating an HTML program or locally on your computer. You can add the following HTML skeleton code:

<html>
     <head>
     </head>
     <body>
     </body>
</html>
HTML


Step 2: Add Brython JavaScript Library Scripts in HTML

Between the head tags, include the following script tags, which link an external JavaScript file with the Brython library:

<script type="text/javascript" src="https://static1.codehs.com/lib/brython/brython-3-11-1.js"></script>
<script type="text/javascript" src="https://static1.codehs.com/lib/brython/brython-stdlib-3-11-1.js"></script>
HTML


Step 3: Add the Brython Python Script

Next, we will add a large Python script to allow your program to recognize available Brython commands for adding shapes, images, colors, and more.

First, create a Python file called brython_graphics.py. In this file, paste the following code:

Step 4: Call Brython on Page Load

The onload event occurs when an object has been loaded. To load the Brython library, we need to call brython() on page load.

In the body tag, add the onload attribute and set its value to "brython()".

<body onload="brython()">

</body>
HTML



Step 5: Add Your Brython Program

In this step we will add your Brython script to the website. Create a file called main.py.

In main.py:

  1. Import the brython_graphics module you created in brython_graphics.py.

    from brython_graphics import *
    Plain text


  2. Underneath the import statement, paste your code for your Brython project.

Step 6: Link Your Brython Program to HTML

Now that you have created your Brython program, we need to add it to the HTML page. Between the body tags, add the following code snippet:

<script type="text/python" src="main.py"></script>
HTML



Step 7: Add a Canvas

We need to add a canvas to the HTML page. In the body tag, add the following code snippet:

<canvas id="brython-canvas" width="400" height="480"></canvas>
HTML

To add some add a border around the canvas, let’s add some styling. Betewen the head tags, add the following CSS style block:

<style>
    html,
    body {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        height: 100%;
        width: 100%;
    }
    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }
    canvas {
        border: 1px solid #d3d3d3;
        margin: 5px;
    }
</style>
HTML



Example:

Here’s an example showing a full HTML program for running Brython Graphics outside of CodeHS. We’ve hosted it in CodeHS, but this HTML will work on any site! You can view it here.