DrawBot Web

DrawBot-style creative coding in the browser

What is this?

DrawBot is a free Python environment for creating two-dimensional graphics — vector shapes, typography, generative design. It is available as a standalone macOS application and as a pip-installable Python module. It was created by Just van Rossum, Erik van Blokland, and Frederik Berlaen as an accessible way to learn Python through visual output.

DrawBot Web brings that same API to the browser. You write the same Python you would write in DrawBot. It runs live on this page — no installation, no macOS, no server.

The code block below is live and editable. Click Run Code to execute it, or change the values and run again.

Please don’t change the first line (the import statement) and the last one (with show()) - they are needed to make the code work.

How it works

DrawBot Web translates DrawBot API calls into HTML Canvas commands, which are then rendered in the browser. The translation happens in Python — you write rect(50, 50, 300, 300) and the library generates the equivalent ctx.fillRect() call behind the scenes.

The library runs inside Pyodide — a WebAssembly build of Python — embedded in a Quarto document using the quarto-live extension.

Coordinates

DrawBot Web uses the same coordinate system as DrawBot: the origin is at the bottom left, and the y-axis points up. This differs from the HTML Canvas default (origin top-left, y-axis down), but the library handles the conversion for you.

Colours

Colours follow the DrawBot convention: all values are floats between 0.0 and 1.0, not 0–255.

Transforms and state

Use savedState() as a context manager to apply transforms temporarily. Anything inside the with block is reset afterwards — including colours, stroke width, and transformations.

What’s next?

See the roadmap for planned features and known limitations. See resources for DrawBot learning materials.