Clone
1
Quickstart
Hugo H edited this page 2025-12-25 20:05:30 +00:00

To add PyCanvas into your application with skulpt, just add the following to the top of your builtInRead() function:

if (x === 'screen' || x === './screen.js') {
    const url = new URL('screen.js', window.location.href).href;
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, false);
    xhr.send();
    if (xhr.status === 200) return xhr.responseText;
    else throw "Could not load screen.js";
}

Now set these variables when you run your code:

const canvas = document.getElementById('canvas');
const container = document.getElementById('preview-container');
if (canvas && container) {
    const w = Math.floor(container.clientWidth);
    const h = Math.floor(container.clientHeight);
    canvas.width = w;
    canvas.height = h;
}

And create a canvas with the id canvas inside a div with the id preview-container.


To create a basic application, define your functions and pass them to s.start() in a dictionary:

import screen as s

def draw():
    s.cls(0)
    s.text(s.CENTERX, s.CENTERY, "Hello World", 7)

s.start({
    "loop": {
        "draw": draw
    }
})