Drawing on the canvas

Every pie.* call makes a node and draws it on the canvas to the right. Press Run on each editor. Each one starts with pie.clear(), so it draws on an empty canvas.

Points, lines and circles

pie.clear()
a = pie.point(-3, -2, out='a')
b = pie.point(3, 2, out='b')
pie.line(a, b)
pie.circle(a, 1.5)
pie.circle(b, pie.distance(a, b), stroke='gray')

pie.distance(a, b) is a node too, so it can be the radius of a circle.

Triangles and colors

pie.clear()
a = pie.point(-3, -2, out='a')
b = pie.point(3, -2, out='b')
c = pie.point(0, 3, out='c')
pie.triangle(a, b, c, fill='#fde68a', stroke='#b45309')
m = pie.midpoint(a, b, fill='crimson')
pie.line(c, m, stroke='crimson')

pie.midpoint isn't built in. It comes from functions/midpoint.ts.

A face

pie.clear()
o = pie.point(0, 0, hidden=True)
pie.circle(o, 3, fill='gold', stroke='#92400e')
pie.circle(pie.point(-1, 1), 0.4, fill='#1f2937')
pie.circle(pie.point(1, 1), 0.4, fill='#1f2937')
pie.arc(o, 2, 200, 340, stroke='#92400e')

hidden=True makes a node that isn't drawn: here the center, so no dot sits on the nose. pie.arc(center, radius, start, end) goes counterclockwise from start to end, in degrees. From 200° to 340° passes through 270°, the bottom, so it smiles.

Ellipses and curves

pie.clear()
pie.ellipse(pie.point(0, 2), 3, 1, 30, stroke='teal')
p1 = pie.point(-4, -3)
p2 = pie.point(4, -3)
c1 = pie.point(-2, 1, fill='gray')
c2 = pie.point(2, -6, fill='gray')
pie.bezier_cubic(p1, c1, c2, p2, stroke='purple')
pie.bezier_quadratic(p1, pie.point(0, 0, fill='gray'), p2, stroke='orange')

The gray points are the control points. The curves bend toward them but don't pass through them.

Text and the grid

pie.clear()
pie.text('Hello, canvas', 0, 2, 24)
pie.text('A box that fits its text', 0, -1, 14, -1, -1)
pie.scalar(70, out='unit')
pie.scalar(0.3, out='gridOpacity')
pie.text('#fff7ed', out='canvasColor')

unit is the pixels per grid unit, gridOpacity fades the grid, and canvasColor is the background. pie.clear() resets all three.

A shape of your own

pie.clear()
center = pie.point(0, 0, out='center')
pie.square(center, 4, fill='#bfdbfe', stroke='#1d4ed8')
pie.square(center, 2, stroke='#1d4ed8')

pie.square and its node type come from functions/square.ts and nodes/square.tsx.