Canvas · Codetoy Docs

Import

import { fill, rect, circle /* … */ } from "codetoy/canvas"
// or: import * as canvas from "codetoy/canvas"

// Canvas is a global static class; no using needed.
Canvas.Fill(255, 0, 0);

from codetoy.canvas import fill, rect, circle  # ...
# or: import codetoy.canvas as canvas

All coordinates and sizes are in pixels, with (0, 0) at the top-left and Y pointing down. Colors use 0–255 for red, green and blue and 0.0–1.0 for alpha. New to drawing in Codetoy? Start with the Drawing guide.

#State

#reset

Clears the canvas and resets every drawing setting (colors, line styles and transforms) to the defaults. Fill and stroke are both turned back on.

reset(): void

Canvas.Reset()

reset() -> None

#push / pop

push()Canvas.Push()push() saves the current drawing state (fill and stroke colors, line settings and transform). pop()Canvas.Pop()pop() restores the most recently pushed state. Calls nest, so every push()Canvas.Push()push() needs a matching pop()Canvas.Pop()pop().

push(): void
pop(): void

Canvas.Push()
Canvas.Pop()

push() -> None
pop() -> None

Example

push()
translate(100, 100)
rotate(Math.PI / 4)
fill(255, 0, 0)
rect(-20, -20, 40, 40)
pop()   // transform and fill color are back to what they were

Canvas.Push();
Canvas.Translate(100, 100);
Canvas.Rotate(Math.PI / 4);
Canvas.Fill(255, 0, 0);
Canvas.Rect(-20, -20, 40, 40);
Canvas.Pop();   // transform and fill color are back to what they were

push()
translate(100, 100)
rotate(math.pi / 4)
fill(255, 0, 0)
rect(-20, -20, 40, 40)
pop()   # transform and fill color are back to what they were

#Color

#fill

Sets the color used to fill shapes and text, and turns fill on.

fill(r: f64, g: f64, b: f64, a: f64 = 1.0): void

Canvas.Fill(double r, double g, double b, double a = 1.0)

fill(r: float, g: float, b: float, a: float = 1.0) -> None

Parameter	Description
`r`, `g`, `b`	Red, green and blue, `0`–`255`.
`a`	Alpha (opacity), `0.0` (invisible) to `1.0` (opaque). Optional.

#stroke

Sets the color used for outlines and lines, and turns stroke on. The default stroke is black.

stroke(r: f64, g: f64, b: f64, a: f64 = 1.0): void

Canvas.Stroke(double r, double g, double b, double a = 1.0)

stroke(r: float, g: float, b: float, a: float = 1.0) -> None

#fillStyle / strokeStyle

Like fill()Canvas.Fill()fill() and stroke()Canvas.Stroke()stroke(), but take any CSS color: hex, named colors, rgb(), hsl() and so on.

fillStyle(color: string): void
strokeStyle(color: string): void

fillStyle("#ff6600")
strokeStyle("hsl(200 80% 60% / 0.5)")

Canvas.FillStyle(string color)
Canvas.StrokeStyle(string color)

Canvas.FillStyle("#ff6600");
Canvas.StrokeStyle("hsl(200 80% 60% / 0.5)");

fillStyle(color: str) -> None
strokeStyle(color: str) -> None

fillStyle("#ff6600")
strokeStyle("hsl(200 80% 60% / 0.5)")

#noFill / noStroke

Turn off filling or outlining for the shapes that follow. Setting a color again with fill()Canvas.Fill()fill()/fillStyle()Canvas.FillStyle()fillStyle() or stroke()Canvas.Stroke()stroke()/strokeStyle()Canvas.StrokeStyle()strokeStyle() turns it back on.

noFill(): void
noStroke(): void

Canvas.NoFill()
Canvas.NoStroke()

noFill() -> None
noStroke() -> None

#Lines

#lineWidth

Sets the thickness of strokes in pixels. The default is 1.

lineWidth(width: f64): void

Canvas.LineWidth(double width)

lineWidth(width: float) -> None

#lineCap / lineJoin / lineMiterLimit

Control how line ends and corners look. They work like the canvas lineCap, lineJoin and miterLimit properties.

lineCap(cap: string): void        // "butt" | "round" | "square"
lineJoin(join: string): void      // "miter" | "round" | "bevel"
lineMiterLimit(limit: f64): void

Canvas.LineCap(string cap)        // "butt" | "round" | "square"
Canvas.LineJoin(string join)      // "miter" | "round" | "bevel"
Canvas.LineMiterLimit(double limit)

lineCap(cap: str) -> None          # "butt" | "round" | "square"
lineJoin(join: str) -> None        # "miter" | "round" | "bevel"
lineMiterLimit(limit: float) -> None

#Shapes

Shapes are filled with the fill color and outlined with the stroke color, unless noFill()Canvas.NoFill()noFill() or noStroke()Canvas.NoStroke()noStroke() is on.

#rect

Draws a rectangle with its top-left corner at (x, y). Pass r to round the corners.

rect(x: f64, y: f64, width: f64, height: f64, r: f64 = 0.0): void

Canvas.Rect(double x, double y, double w, double h, double r = 0.0)

rect(x: float, y: float, width: float, height: float, r: float = 0.0) -> None

#circle

Draws a circle centered at (x, y).

circle(x: f64, y: f64, radius: f64): void

Canvas.Circle(double x, double y, double radius)

circle(x: float, y: float, radius: float) -> None

#ellipse

Draws an ellipse centered at (x, y). w and h are the horizontal and vertical radii (half the full width and height).

ellipse(x: f64, y: f64, w: f64, h: f64): void

Canvas.Ellipse(double x, double y, double w, double h)

ellipse(x: float, y: float, w: float, h: float) -> None

#line

Draws a straight line using the stroke color and lineWidth()Canvas.LineWidth()lineWidth(). Lines are never filled.

line(x1: f64, y1: f64, x2: f64, y2: f64): void

Canvas.Line(double x1, double y1, double x2, double y2)

line(x1: float, y1: float, x2: float, y2: float) -> None

#triangle

Draws a triangle through three points.

triangle(x1: f64, y1: f64, x2: f64, y2: f64, x3: f64, y3: f64): void

Canvas.Triangle(double x1, double y1, double x2, double y2, double x3, double y3)

triangle(x1: float, y1: float, x2: float, y2: float, x3: float, y3: float) -> None

#polygon

Draws a closed shape through any number of points, passed as one flat list: [x1, y1, x2, y2, …].

polygon(points: f64[]): void

// a pentagon
const pts = new Array<f64>()
for (let i = 0; i < 5; i++) {
  const a = (i as f64) / 5.0 * 2.0 * Math.PI - Math.PI / 2
  pts.push(200 + Math.cos(a) * 60)
  pts.push(200 + Math.sin(a) * 60)
}
polygon(pts)

Canvas.Polygon(double[] points)

// a pentagon
var pts = new double[10];
for (int i = 0; i < 5; i++) {
    double a = i / 5.0 * 2 * Math.PI - Math.PI / 2;
    pts[i * 2] = 200 + Math.Cos(a) * 60;
    pts[i * 2 + 1] = 200 + Math.Sin(a) * 60;
}
Canvas.Polygon(pts);

polygon(points: list[float]) -> None

# a pentagon
import math
pts = []
for i in range(5):
    a = i / 5 * 2 * math.pi - math.pi / 2
    pts += [200 + math.cos(a) * 60, 200 + math.sin(a) * 60]
polygon(pts)

#arc

Draws part of a circle centered at (x, y), from startAngle to endAngle in radians. 0 points right and angles increase clockwise. The ends are joined with a straight line, so a filled arc is a circular segment (not a pie slice).

arc(x: f64, y: f64, radius: f64, startAngle: f64, endAngle: f64, anticlockwise: bool = false): void

Not available in C# yet. Compare languages

arc(x: float, y: float, radius: float, startAngle: float, endAngle: float, anticlockwise: bool = False) -> None

#Transforms

Transforms change the coordinate system for everything drawn after them. They stack, and push()Canvas.Push()push()/pop()Canvas.Pop()pop() save and restore them.

#translate

Moves the origin by (x, y).

translate(x: f64, y: f64): void

Canvas.Translate(double x, double y)

translate(x: float, y: float) -> None

#rotate

Rotates clockwise around the current origin by radians. Use translate()Canvas.Translate()translate() first to rotate around a shape's center.

rotate(radians: f64): void

Canvas.Rotate(double radians)

rotate(radians: float) -> None

#scale

Scales drawing by x horizontally and y vertically. Negative values flip.

scale(x: f64, y: f64): void

Canvas.Scale(double x, double y)

scale(x: float, y: float) -> None

#resetTransform

Removes all transforms without touching colors or line settings.

resetTransform(): void

Canvas.ResetTransform()

resetTransform() -> None

#Paths

Paths let you draw any outline: straight segments and curves. Start with beginPath()Canvas.BeginPath()beginPath(), add segments, then draw with fillPath()Canvas.FillPath()fillPath() and/or strokePath()Canvas.StrokePath()strokePath(). Paths use the current fill and stroke colors and ignore noFill()Canvas.NoFill()noFill()/noStroke()Canvas.NoStroke()noStroke().

beginPath(): void
moveTo(x: f64, y: f64): void
lineTo(x: f64, y: f64): void
quadraticCurveTo(cpx: f64, cpy: f64, x: f64, y: f64): void
bezierCurveTo(cp1x: f64, cp1y: f64, cp2x: f64, cp2y: f64, x: f64, y: f64): void
closePath(): void
fillPath(): void
strokePath(): void

Canvas.BeginPath()
Canvas.MoveTo(double x, double y)
Canvas.LineTo(double x, double y)
Canvas.QuadraticCurveTo(double cpx, double cpy, double x, double y)
Canvas.BezierCurveTo(double cp1x, double cp1y, double cp2x, double cp2y, double x, double y)
Canvas.ClosePath()
Canvas.FillPath()
Canvas.StrokePath()

beginPath() -> None
moveTo(x: float, y: float) -> None
lineTo(x: float, y: float) -> None
quadraticCurveTo(cpx: float, cpy: float, x: float, y: float) -> None
bezierCurveTo(cp1x: float, cp1y: float, cp2x: float, cp2y: float, x: float, y: float) -> None
closePath() -> None
fillPath() -> None
strokePath() -> None

Function	Description
`beginPath()Canvas.BeginPath()beginPath()`	Starts a new, empty path.
`moveTo()Canvas.MoveTo()moveTo()`	Moves the pen to `(x, y)` without drawing.
`lineTo()Canvas.LineTo()lineTo()`	Adds a straight segment to `(x, y)`.
`quadraticCurveTo()Canvas.QuadraticCurveTo()quadraticCurveTo()`	Adds a curve bent toward one control point.
`bezierCurveTo()Canvas.BezierCurveTo()bezierCurveTo()`	Adds a curve shaped by two control points.
`closePath()Canvas.ClosePath()closePath()`	Adds a segment back to the start of the path.
`fillPath()Canvas.FillPath()fillPath()`	Fills the path with the fill color.
`strokePath()Canvas.StrokePath()strokePath()`	Outlines the path with the stroke color.

#Text

#font

Sets the font for text()Canvas.Text()text() and measureText()Canvas.MeasureText()measureText(). family is any CSS font family available in the browser ("Arial", "monospace", "Georgia" …), size is in pixels, and weight is a CSS weight like "bold" or "600".

font(family: string, size: f64, weight: string = "normal"): void

Canvas.Font(string family, double size, string weight = "normal")

font(family: str, size: float, weight: str = "normal") -> None

#text

Draws a string with the fill color. (x, y) is the top-left corner of the text.

text(content: string, x: f64, y: f64): void

Canvas.Text(string content, double x, double y)

text(content: str, x: float, y: float) -> None

#measureText

Returns how wide content would be, in pixels, with the current font. Use it to center or right-align text.

measureText(content: string): f64

font("Arial", 24, "bold")
const w = measureText("Hello")
text("Hello", screen.centerX() - w / 2, 20)

Canvas.MeasureText(string content) // → double

Canvas.Font("Arial", 24, "bold");
double w = Canvas.MeasureText("Hello");
Canvas.Text("Hello", Screen.CenterX - w / 2, 20);

measureText(content: str) -> float

font("Arial", 24, "bold")
w = measureText("Hello")
text("Hello", centerX() - w / 2, 20)