Roadmap
DrawBot Web translates the DrawBot API into HTML Canvas calls, running in the browser via Pyodide. This page maps what has been implemented so far, and what is planned…
v0.3 — current release
Canvas & pages
| DrawBot | Canvas API | Status |
|---|---|---|
size(w, h) |
canvas.width / height |
✓ |
newPage(w, h) |
new canvas element | planned |
width() / height() |
canvas.width / height |
planned |
saveImage() |
canvas.toDataURL() |
planned |
Colour
| DrawBot | Canvas API | Status |
|---|---|---|
fill(r, g, b, a) |
ctx.fillStyle |
✓ |
stroke(r, g, b, a) |
ctx.strokeStyle |
✓ |
strokeWidth(w) |
ctx.lineWidth |
✓ |
fill(None) / stroke(None) |
fillStyle = null |
✓ |
linearGradient() |
createLinearGradient() |
planned |
radialGradient() |
createRadialGradient() |
planned |
shadow() |
ctx.shadowColor etc. |
planned |
blendMode() |
ctx.globalCompositeOperation |
planned |
Shapes
| DrawBot | Canvas API | Status |
|---|---|---|
rect(x, y, w, h) |
ctx.fillRect() |
✓ |
oval(x, y, w, h) |
ctx.ellipse() |
✓ |
line(pt1, pt2) |
ctx.moveTo / lineTo |
✓ |
polygon(*pts) |
ctx path + lineTo loop | ✓ |
BezierPath |
Path2D / ctx.bezierCurveTo |
planned |
Transforms & state
| DrawBot | Canvas API | Status |
|---|---|---|
translate(x, y) |
ctx.translate() |
✓ |
rotate(angle) |
ctx.rotate() |
✓ |
scale(sx, sy) |
ctx.scale() |
✓ |
savedState() |
ctx.save() / restore() |
✓ |
save() / restore() |
ctx.save() / restore() |
✓ |
skew(x, y) |
ctx.transform() |
planned |
Typography
| DrawBot | Canvas API | Status |
|---|---|---|
text(txt, (x,y)) |
ctx.fillText() |
planned |
font() / fontSize() |
ctx.font |
planned |
| Variable fonts | CSS font-variation-settings |
planned — browser helps here |
textBox() |
no direct equivalent | hard |
FormattedString |
no direct equivalent | hard |
Image & animation
| DrawBot | Canvas API | Status |
|---|---|---|
image(path, (x,y)) |
ctx.drawImage() |
planned |
frameDuration() |
requestAnimationFrame |
planned |
ImageObject filters |
CSS filters (subset) | hard |
Notes on the hard cases
textBox() requires a text layout engine — flowing text into a box with line breaking, hyphenation, and mixed styles. This was flagged as a major obstacle by Just van Rossum himself in drawbot-skia (see below). It is not impossible in the browser, but it is a significant project in itself.
FormattedString requires mixed styles within a single text run. Same challenge.
ImageObject filters are macOS Core Image filters exposed through DrawBot. Most have no Canvas equivalent. A small subset (gaussianBlur, sepiaTone, brightness/contrast) map to CSS filters and may be implemented in a future version.
Variable fonts are probably easier in the browser than in drawbot-skia: the browser handles font-variation-settings natively via CSS. This is a case where the browser platform helps rather than hinders.
Affordances
The original DrawBot IDE is macOS-only and relies on Apple’s CoreText and CoreImage frameworks. Some of its capabilities are deeply tied to those frameworks and have no browser equivalent. DrawBot Web does not aim to replicate everything — it aims to cover the core drawing vocabulary that makes DrawBot useful for generative design and typographic experimentation. And who knows - functions may be added that weren’t there before.
Relationship to drawbot-skia
drawbot-skia is a cross-platform DrawBot implementation using Skia as a rendering backend. It cannot run in the browser because skia-python, its dependency, is a compiled C++ extension with no WebAssembly build.
DrawBot Web takes a different approach: instead of porting a graphics engine to the browser, it uses what the browser already provides — the HTML Canvas API — and writes a thin Python translation layer on top of it.