Canvas
Drawing to pixels
Sides are clamped to 1 to 500 points and at most 1000 draw operations are kept; further calls are dropped. Rectangles use { x, y, w, h }, not width and height. render() gives back an image, which goes into a widget tree or into Image.
Properties
widthNumberreadonlyThe width it was created with, after clamping.
heightNumberreadonlyThe height it was created with, after clamping.
drawAnyThe drawing operations: rect, ellipse, text and image.
Methods
.render()WidgetNodeRasterises everything drawn so far and returns it as an image.
returns An image node, ready for Script.setWidget, an Image node, or Image.resize.
.draw.rect(rect, style?)A rectangle.
- rect Any required
The box to draw in.
- x Number
Left edge. Default 0.
- y Number
Top edge. Default 0.
- w Number
Width. Default 0, which draws nothing.
- h Number
Height. Default 0, which draws nothing.
- x Number
- style Any
.draw.ellipse(rect, style?)An ellipse filling the rectangle. A square rectangle gives a circle.
- rect Any required
The box to draw in.
- x Number
Left edge. Default 0.
- y Number
Top edge. Default 0.
- w Number
Width. Default 0, which draws nothing.
- h Number
Height. Default 0, which draws nothing.
- x Number
- style Any
.draw.text(text, rect, style?)Text laid out inside the rectangle, clipped where it does not fit.
- text String required
The string to draw.
- rect Any required
The box to draw in.
- x Number
Left edge. Default 0.
- y Number
Top edge. Default 0.
- w Number
Width. Default 0, which draws nothing.
- h Number
Height. Default 0, which draws nothing.
- x Number
- style Any
- font RootlessFont
Size, weight and family as one value.
- fontSize Number
Point size. Default 17, larger than a Text node's.
- fontWeight FontWeight
Weight, when font is not given.
- fontFamily String
Family name, when font is not given.
- color Color
Text colour. Default white.
- align TextAlign
Alignment inside the rectangle. Default left.
- font RootlessFont
.draw.image(image, rect)Draws an image, stretched to the rectangle.
- image Any required
From Image.download, Photos.image, or another canvas's render().
- rect Any required
The box to draw in.
- x Number
Left edge. Default 0.
- y Number
Top edge. Default 0.
- w Number
Width. Default 0, which draws nothing.
- h Number
Height. Default 0, which draws nothing.
- x Number
Canvas(width, height, options?)Canvas ›A pixel drawing surface. Draw with canvas.draw.*, then call render().
- width Number required
Points, 1 to 500.
- height Number required
Points, 1 to 500.
- options Any
- opaque Boolean
Fill the background before drawing. Default true; false leaves it transparent.
- scale Boolean
Render at the screen's scale factor. Default true.
- opaque Boolean
Examples
Simple chart
const c = new Canvas(200, 100, {opaque: false});
c.draw.rect(
{x: 0, y: 60, w: 40, h: 40},
{fill: Color.blue()}
);
c.draw.rect(
{x: 50, y: 30, w: 40, h: 70},
{fill: Color.green()}
);
c.draw.text("Sales", {x: 0, y: 0, w: 200, h: 20}, {
fontSize: 14, color: Color.white()
});
const img = c.render();
Script.setWidget(img);