Skip to content

The Graphics Extension

LightningLaser8 edited this page Sep 15, 2024 · 4 revisions

Recently, graphics functionality was moved to an extension. This extension is documented here.

Global Variables

mx (number) The position of the mouse pointer in pixels relative to the left side of the hovered canvas.
my (number) The position of the mouse pointer in pixels relative to the top side of the hovered canvas.
md (boolean) true if any button on the mouse is pressed on the canvas, false if not.

Keywords

Creating a Canvas

canvas Creates a new canvas element, or resizes the existing one.

Syntax

canvas <width> <height>
Creates a new canvas. If one already exists in the interpreter, it will be resized to the new dimensions.
Dimensions are width by height.

Drawing Rectangles

[!] Requires a canvas to have been made
rectangle Draws a rectangle somewhere on the canvas.

Syntax

rectangle <x> <y> <width> <height>
Draws a rectangle at x,y on the canvas (0,0 is the top-left corner) with width width and height height.

Accepted Labels

borderless Draws a solid block.
hollow Draws a hollow outline of the rectangle.
Default is both of the above at once. aligned When combined with left or right, changes where the centre of the shape is (default is in the middle)

Drawing Circles

[!] Requires a canvas to have been made
circle Draws a circle somewhere on the canvas.
ellipse Draws an ellipse: a circle with different width and height.

Syntax

circle <x> <y> <radius>
Draws a circle at x,y on the canvas (0,0 is the top-left corner) with radius radius. ellipse <x> <y> <width> <height>
Draws an ellipse at x,y on the canvas (0,0 is the top-left corner) with radii width and height.

Accepted Labels

borderless Draws a solid circle.
hollow Draws a hollow outline of the circle.
Default is both of the above at once. aligned When combined with left or right, changes where the centre of the shape is (default is in the middle)

Text

[!] Requires a canvas to have been made
text Writes some text on the canvas.
textsize Changes the size of the drawn text.

Syntax

text <x> <y> <text>
Writes text at x,y on the canvas (0,0 is the top-left corner). textsize <size>
Sets the height in pixels of each letter of text to size.

Accepted Labels

aligned When combined with left or right, changes where the centre of the text box is (default is in the middle)

Styling

Does not technically require a canvas to not crash, just needs one to see the effects.
fill Sets fill colour and optionally transparency.
outline Sets outline colour and optionally width.

Syntax

fill <colour>
Sets the fill colour to the specified colour. colour can be any CSS colour string, or a hex code in the form #rrggbb(aa). outline <colour> <width>
Sets the outline colour to the specified colour. colour can be any CSS colour string, or a hex code in the form #rrggbb(aa).
If specified, changes the outline width to width.

Accepted Labels

no Sets outline width to zero, and colour to transparent. Ignores parameters.

Background Colour

[!] Requires a canvas to have been made
background Fills the background of the canvas with a colour.

Syntax

background <colour>
Fills the background with the specified colour. colour can be any CSS colour string, or a hex code in the form #rrggbb.

Transformations

[!] Requires a canvas to have been made
save Saves the current drawing state, including rotations and styles to a stack.
restore Restores the most recently saved state.

Syntax

save
Saves the current state.
restore
Restores the most recently saved state.

Buffered Graphics

The GraphicsExtension constructor's second parameter, bufferedGraphics (true by default) which queues up canvas operations, rather than execute them as soon as possible.
draw Draws everything in the buffer, and clears it.

Syntax

draw
Draws everything in the buffer at once.

Types

colour: Any valid CSS colour string, including hex codes, colours of the form rgb(r, g, b) and named colours.

Clone this wiki locally