Canvas

A vector drawing surface. ScriptWeaver's canvas is built on tkpath, so it keeps a retained scene graph: every shape you draw is a live object you can restyle, move, transform, or bind events to — not just pixels.

You build a drawing by creating items (shapes, text, and groups) as children of the canvas, the same way you create widgets inside a frame.

Example

const canvas = app.Canvas({ background: 'white', width: 400, height: 300 });
canvas.pack.configure({ fill: 'both', expand: true });

// A semi-transparent circle, drawn directly on the canvas.
const dot = canvas.Circle({
  cx: 100,
  cy: 100,
  r: 50,
  fill: 'rgba(220, 50, 50, 0.5)',
  stroke: 'black',
  strokeWidth: 2,
});

// A group is a movable container; its matrix transforms everything inside it.
const badge = canvas.Group({ matrix: [1, 0, 0, 1, 200, 80] }); // translate by (200,80)
badge.Rect({ x: 0, y: 0, width: 90, height: 60, rx: 8, ry: 8, fill: 'steelblue' });
badge.PText({ x: 45, y: 30, text: 'Hi', fill: 'white', textAnchor: 'c', fontSize: 14 });

// Items are live: restyle on hover.
dot.bind('<Enter>', () => (dot.fill = 'rgba(220, 50, 50, 1.0)'));
dot.bind('<Leave>', () => (dot.fill = 'rgba(220, 50, 50, 0.5)'));

Items

Create these as children of the canvas (or of a group):

Item	Constructor arguments	Draws
`Rect({ x, y, width, height, rx?, ry? })`	position, size, optional corner radii	A rectangle (rounded if `rx`/`ry` given).
`Circle({ cx, cy, r })`	centre, radius	A circle.
`Ellipse({ cx, cy, rx, ry })`	centre, radii	An ellipse.
`Path({ d })`	SVG path data	An arbitrary path — `d` is an SVG `d` string, e.g. `'M 0 0 L 100 50 Z'`.
`PText({ x, y, text })`	position, string	Text.
`Group({ matrix? })`	optional transform	A container for other items (see below).

Rect, Circle, and Ellipse are convenience wrappers that generate the right Path data for you.

Styling

Every item takes these options — set them at creation or change them later as properties (dot.stroke = 'navy'):

Option	Type	Description
`fill`	string	Fill colour — a name (`'black'`), hex (`'#3366ff'`), or `'rgba(r,g,b,a)'`.
`stroke`	string	Outline colour.
`strokeWidth`	number	Outline width in pixels.
`opacity`	number	Overall opacity, `0`–`1`.
`fillOpacity`	number	Fill opacity, `0`–`1`.
`matrix`	list	A `[a, b, c, d, e, f]` affine transform (see below).
`tags`	string / list	Tags for grouping items in queries.
`onClick`	function	Called when the item is clicked.

PText additionally takes textAnchor ('start', 'c', 'end') and the font parts fontFamily, fontSize, fontWeight, fontSlant (it does not use the widget font / anchor options).

Groups and transforms

A Group is an item that contains other items. Its matrix — a 6-number affine transform [a, b, c, d, e, f] — applies to every child, so you can move, scale, or rotate a whole sub-drawing at once:

const layer = canvas.Group({ matrix: [1, 0, 0, 1, 50, 50] }); // translate (50,50)
layer.Circle({ cx: 0, cy: 0, r: 20, fill: 'orange' });

// Common matrices: translate [1,0,0,1,tx,ty]; scale [sx,0,0,sy,0,0].
layer.matrix = [2, 0, 0, 2, 50, 50]; // now 2× scaled

Events

Items support bind() just like widgets — '<Button-1>', '<Enter>', '<Leave>', motion, and so on — and the onClick option is a shorthand for a left-click handler.

Canvas options

Option	Type	Description
`background`	string	Canvas background colour.
`width` / `height`	number	Size in pixels.
`scrollRegion`	list	Scrollable area `[x0, y0, x1, y1]` for use with a scrollbar.