Graphics

This is an wrapper to the HTML canvas context which provides higher-level features.

Methods

push_clip

Graphics->push_clip( (number) x, (number) y, (number) width, (number) height )

Clips a region of the canvas to that anything drawn outside of the area will not show. Use pop_clip when you are done clipping.

pop_clip

Graphics->pop_clip()

When you are done with using a clip, use this function to restore the canvas to the state before the clipping region was set.

get_clip

Graphics->get_clip()

Returns an object with the keys x, y, width, and height representing the dimensions of the current clipping region.

path

Graphics->path( (array) data, (boolean) closepath = false, (boolean) stroke = true, (boolean) fill = false)

Draws a path on the screen. The data argument is an array object filled with coordinates. The coordinates are represented by arrays where the first value is the x position, and the second value is the y position. Set closepath to true to close the path automatically. stroke and fill are booleans indicating whether or not to apply a stroke or fill with the current stroke and fill settings.

// Draw a box around allocation (a is the allocation)
context.path([
	[a.x,           a.y + a.height - 1],
	[a.x,           a.y],
	[a.x + a.width - 1, a.y],
	[a.x + a.width - 1, a.y + a.height - 1]
]);

rect

Graphics->rect( (number) x, (number) y, (number) width, (number) height, (boolean) stroke = false, (boolean) fill = true)

Draws a rectangle on the screen. Set stroke and fill to outline or fill it with the current style.

// Fill a box around allocation (a is the allocation)
context.rect(a.x, a.y, a.width, a.height);

create_linear_gradient

Graphics->create_linear_gradient( (number) x1, (number) y1, (number) x2, (number) y2, (array) data )

Creates a valid fill style which creates a linear gradient from (x1, y1) to (x2, y2). The data argument is an array object filled with color stops. A color stop is an array where the first element is a number from 0 to 1 representing the position of the stop, and the second element is the color as a css string.

// Create a gradient that starts at the top-left of the allocation and ends
// at the bottom-left. The gradient gradually gets darker as you go down.
context.create_linear_gradient (a.x, a.y, a.x, a.y+a.height, [
	[0, "#3f3f3f"],
	[1, "#2e2e2e"]
])

set_stroke_style

Graphics->set_stroke_style( (number) width, (string) cap, (string) linejoin, (number) miterlimit )

Sets the styling of any path or rectagle that has a stroke.

• width: a number representing the width of the line
• cap: a string representing the style of the line-ends. Can be "butt", "round", or "square".
• linejoin: a string representing how two lines are connected. Can be "bevel", "round", or "miter"
• miterlimit: sets the limit at which the lines are mitered

set_fill_stroke

Graphics->set_fill_stroke( (string) fill, (string) stroke )

Sets the styling of any fills or strokes.

• fill: can be a string representing a fill color (css color) or a gradient object
• stroke: string representing stroke color (css color)

save

Graphics->save()

Save the styles of the canvas so it can later be restored with restore().

restore

Graphics->restore()

Restores the state of the canvas styles to where it was when save() was last called.