Introduction

There's nothing to install and no project to configure. You write one file, press Play, and your code draws onto a canvas immediately. When it's ready, share a link, embed it on a website, or publish a build your friends can play inside Discord.

import { fill, rect, circle } from "codetoy/canvas"
import * as screen from "codetoy/screen"
import * as input from "codetoy/input"

export function update(): void {
  fill(20, 20, 30)
  rect(0, 0, screen.width(), screen.height())

  fill(100, 180, 255)
  circle(input.mouseX(), input.mouseY(), 24)
}

Screen.OnUpdate(() => {
    Canvas.Fill(20, 20, 30);
    Canvas.Rect(0, 0, Screen.Width, Screen.Height);

    Canvas.Fill(100, 180, 255);
    Canvas.Circle(Input.MouseX, Input.MouseY, 24);
});

from codetoy.canvas import fill, rect, circle
from codetoy.screen import width, height
from codetoy._input import mouseX, mouseY

def update():
    fill(20, 20, 30)
    rect(0, 0, width(), height())

    fill(100, 180, 255)
    circle(mouseX(), mouseY(), 24)

That's a complete program: a circle that follows your mouse.

#How Codetoy works

• One file. Your whole program lives in a single script. There are no scenes, objects or assets to set up.
• Immediate-mode drawing. Every frame, you clear the canvas and draw what should be on screen. The API is modeled on the HTML CanvasRenderingContext2D, so if you've drawn on a web canvas, you already know it.
• An update loop and events. Codetoy calls your export function update()Screen.OnUpdate()def update() every frame and notifies you of keyboard, mouse and touch input.
• Runs in the browser. Code compiles to WebAssembly (or runs on Pyodide for Python) right in the page.

#Next steps