Olympe SDK

Class: Canvas

olympe.ui.std. Canvas

The Canvas class provides a 2D rendering context. It is used for drawing shapes, text, images, and other objects.

new Canvas( [dimension])

Creates a Canvas with the specified dimension.

Parameters:
Name Type Argument Description
dimension olympe.df.PVector2 <optional>

The dimension (w, h).

Extends

Methods

addColorStop(x, color)

Adds a new color stop, defined by an offset and a color, to a given canvas gradient. If no gradient was created, then this method does nothing.

Parameters:
Name Type Description
x olympe.df.PONumber | number

A value between 0.0 and 1.0 that represents the position between start and end in a gradient.
color string

A color value to display at the stop position.
See:
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

arc(x, y, radius, startAngle, endAngle [, anticlockwise])

Creates a circular arc centered at '(x, y)' with a radius of 'radius'. The path starts at 'startAngle' and ends at 'endAngle', and travels in the direction given by 'anticlockwise' (defaulting to clockwise).

Parameters:
Name Type Argument Default Description
x olympe.df.PONumber | number

The x-axis (horizontal) coordinate of the arc's center.
y olympe.df.PONumber | number

The y-axis (vertical) coordinate of the arc's center.
radius olympe.df.PONumber | number

The arc's radius. Must be non-negative.
startAngle olympe.df.PONumber | number

The angle at which the arc starts, measured clockwise from the positive x-axis and expressed in radians.
endAngle olympe.df.PONumber | number

The angle at which the arc ends, measured clockwise from the positive x-axis and expressed in radians.
anticlockwise olympe.df.PONumber | number <optional>
 false

true to have the arc drawn counter-clockwise between the start and end angles.
Returns:

This Canvas

Type
olympe.ui.std.Canvas

arcTo(x1, y1, x2, y2, radius)

Adds a circular arc to the current sub-path, using the given control points and radius. The arc is automatically connected to the path's latest point with a straight line, if necessary for the specified parameters.

Parameters:
Name Type Description
x1 olympe.df.PONumber | number

The x-axis coordinate of the first control point.
y1 olympe.df.PONumber | number

The y-axis coordinate of the first control point.
x2 olympe.df.PONumber | number

The x-axis coordinate of the second control point.
y2 olympe.df.PONumber | number

The y-axis coordinate of the second control point.
radius olympe.df.PONumber | number

The arc's radius. Must be non-negative.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

beginPath()

Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.

Returns:

This Canvas.

Type
olympe.ui.std.Canvas

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Adds a cubic Bézier curve to the current sub-path. It requires three points: the first two are control points and the third one is the end point. The starting point is the latest point in the current path, which can be changed using moveTo() before creating the Bézier curve.

Parameters:
Name Type Description
cp1x olympe.df.PONumber | number

The x-axis coordinate of the first control point.
cp1y olympe.df.PONumber | number

The y-axis coordinate of the first control point.
cp2x olympe.df.PONumber | number

The x-axis coordinate of the second control point.
cp2y olympe.df.PONumber | number

The y-axis coordinate of the second control point.
x olympe.df.PONumber | number

The x-axis coordinate of the end point.
y olympe.df.PONumber | number

The y-axis coordinate of the end point.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

clearRect(x, y, w, h)

Erases the pixels in a rectangular area by setting them to transparent black.

Parameters:
Name Type Description
x olympe.df.PONumber | number

The x-axis coordinate of the rectangle's starting point.
y olympe.df.PONumber | number

The y-axis coordinate of the rectangle's starting point.
w olympe.df.PONumber | number

The rectangle's width. Positive values are to the right, and negative to the left.
h olympe.df.PONumber | number

The rectangle's height. Positive values are down, and negative are up.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

clip()

Turns the current or given path into the current clipping region. It replaces any previous clipping region.

Returns:

This Canvas.

Type
olympe.ui.std.Canvas

closePath()

Attempts to add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing.

Returns:

This Canvas.

Type
olympe.ui.std.Canvas

createLinearGradient(x0, y0, x1, y1)

Creates a gradient along the line connecting two given coordinates.

Linear Gradient

Parameters:
Name Type Description
x0 olympe.df.PONumber | number

The x-coordinate of the start point of the gradient
y0 olympe.df.PONumber | number

The y-coordinate of the start point of the gradient
x1 olympe.df.PONumber | number

The x-coordinate of the end point of the gradient
y1 olympe.df.PONumber | number

The y-coordinate of the end point of the gradient
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

fill()

Fills the current or given path with the current fillStyle.

See:
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

fillRect(x, y, w, h)

Draws a rectangle that is filled according to the current fillStyle.

Parameters:
Name Type Description
x olympe.df.PONumber | number

The x-axis coordinate of the rectangle's starting point.
y olympe.df.PONumber | number

The y-axis coordinate of the rectangle's starting point.
w olympe.df.PONumber | number

The rectangle's width. Positive values are to the right, and negative to the left.
h olympe.df.PONumber | number

The rectangle's height. Positive values are down, and negative are up.
See:
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

fillStyleWithCurrentGradient()

Uses the currently defined gradient as the fill style. If no gradient was created, then this method does nothing.

See:
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

fillText(text, x, y [, maxWidth])

draws a text string at the specified coordinates, filling the string's characters with the current fillStyle. An optional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.

This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it.

The text is rendered using the font and text layout configuration as defined by the font, textAlign, textBaseline, and direction properties.

Parameters:
Name Type Argument Default Description
text olympe.df.POString | string

The text string to render into the context.
x olympe.df.PONumber | number

The x-axis coordinate of the point at which to begin drawing the text, in pixels.
y olympe.df.PONumber | number

The y-axis coordinate of the point at which to begin drawing the text, in pixels.
maxWidth olympe.df.PONumber | number <optional>
 no-limit

The maximum number of pixels wide the text may be once rendered.
See:
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

getFocus()

Checks whether this Element has the focus.

Warning: Focus may not be applicable on some elements, depending on the platform.

Inherited From:
Overrides:
Returns:

true if Element has focus.

Type
olympe.df.POBoolean

<protected> getGestureEvent()

Gets the gesture event manager attached to this element

Inherited From:
Overrides:
Returns:
Type
olympe.ui.events.GestureEventManager

getHeight()

Gets the height of this element.

Inherited From:
Overrides:
See:
Returns:

the height of this element.

Type
olympe.df.PONumber

getHTMLElement()

Return the DOM HTMLElement if exists (may be null)

Inherited From:
Overrides:
Returns:
Type
Element

<protected> getMouseEvent()

Gets the mouse event manager attached to this element.

Inherited From:
Overrides:
Returns:

the mouse event manager.

Type
olympe.ui.events.MouseEventManager

getParent()

Gets the parent, or container, of this element.

Inherited From:
Overrides:
Returns:

the parent of this element.

Type
olympe.ui.std.Element | olympe.df.Proxy

getPosition()

Gets the position (x,y) for this element.

Inherited From:
Overrides:
Returns:

Position of this element.

Type
olympe.df.PVector2

<package> getUIProxyCanvas()

Returns:

Proxified UI object canvas

Type
olympe.uiapi.std.Canvas

getUIProxyDockableElement()

Note: needs to be public because it is called by RootElement !

Inherited From:
Overrides:
Returns:

The proxy element from the UI thread

Type
olympe.uiapi.std.DockableElement

<protected> getUIProxyElement()

Returns the native UI element associated with this Element.

Inherited From:
Overrides:
Returns:

The proxy element from the UI thread.

Type
olympe.uiapi.std.Element

getWidth()

Gets the width of this element.

Inherited From:
Overrides:
See:
Returns:

the width of this element.

Type
olympe.df.PONumber

getX()

Gets the x coordinate of the position of this element.

Inherited From:
Overrides:
See:
Returns:

the x coordinate for this element.

Type
olympe.df.PONumber

getY()

Gets the y coordinate of the position of this element.

Inherited From:
Overrides:
See:
Returns:

the y coordinate for this element.

Type
olympe.df.PONumber

isHidden()

Checks whether this Element is hidden.

Inherited From:
Overrides:
Returns:

true is this element is hidden.

Type
olympe.df.POBoolean

lineTo(x, y)

adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.

Like other methods that modify the current path, this method does not directly render anything. To draw the path onto a canvas, you can use the 'fill()' or 'stroke()' methods.

Parameters:
Name Type Description
x olympe.df.PONumber | number

The x-axis coordinate of the line's end point.
y olympe.df.PONumber | number

The y-axis coordinate of the line's end point.
See:
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

lineToRelative(x, y)

Parameters:
Name Type Description
x olympe.df.PONumber | number
y olympe.df.PONumber | number
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

moveTo(x, y)

Begins a new sub-path at the point specified by the given '(x, y)' coordinates.

Parameters:
Name Type Description
x olympe.df.PONumber | number

The x-axis (horizontal) coordinate of the point.
y olympe.df.PONumber | number

The y-axis (vertical) coordinate of the point.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

quadraticCurveTo(cpx, cpy, x, y)

Adds a quadratic Bézier curve to the current sub-path. It requires two points: the first one is a control point and the second one is the end point. The starting point is the latest point in the current path, which can be changed using 'moveTo()' before creating the quadratic Bézier curve.

Parameters:
Name Type Description
cpx olympe.df.PONumber | number

The x-axis coordinate of the control point.
cpy olympe.df.PONumber | number

The y-axis coordinate of the control point.
x olympe.df.PONumber | number

The x-axis coordinate of the end point.
y olympe.df.PONumber | number

The y-axis coordinate of the end point.
See:
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

rect(x, y, w, h)

Adds a rectangle to the current path.

Like other methods that modify the current path, this method does not directly render anything.

To draw the rectangle onto a canvas, you can use the fill() or stroke() methods.

Parameters:
Name Type Description
x olympe.df.PONumber | number

The x-axis coordinate of the rectangle's starting point.
y olympe.df.PONumber | number

The y-axis coordinate of the rectangle's starting point.
w olympe.df.PONumber | number

The rectangle's width. Positive values are to the right, and negative to the left.
h olympe.df.PONumber | number

The rectangle's height. Positive values are down, and negative are up.
See:
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

refreshSize()

Refresh component internal size

Inherited From:
Overrides:

removeTooltip()

Removes the tooltip from this element.

Inherited From:
Overrides:
Returns:

This element.

Type
olympe.ui.std.Element

saveAsPicture(callback)

Saves the content of this Canvas into an image and passes the resulting image to the specified callback.

Parameters:
Name Type Description
callback function

The callback the image will be provided to.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

setAccelerated(accelerated)

Sets whether this DockableElement movements should be calculated by the GPU.

Note: This function doesn't guarantee that the implementation will support GPU acceleration.

Parameters:
Name Type Description
accelerated olympe.df.POBoolean | olympe.df.Node | boolean

true if this DockableElement movements should be calculated by the GPU.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setBackgroundColor(color)

Sets the background color for this Element.

Parameters:
Name Type Description
color olympe.df.Proxy | olympe.df.Node | olympe.df.Color

The background color.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImage(url [, sizingMode] [, positioningMode] [, size] [, position])

Sets the background image for this Element.

Notes:

  • The size is ignored if the sizing mode is not set to MANUAL.
  • The position is ignored if the positioning mode is not set to MANUAL.
Parameters:
Name Type Argument Default Description
url olympe.df.POString | olympe.df.Node | string

URL for the image.
sizingMode olympe.ui.common.BackgroundImageSize | olympe.df.Proxy | olympe.df.Node <optional>
 AUTO

The sizing mode for the image.
positioningMode olympe.ui.common.BackgroundImagePosition | olympe.df.Proxy | olympe.df.Node <optional>
 TOPLEFT

The positioning mode for this image.
size olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node <optional>

Size, in pixel.
position olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node <optional>

Position of the image, in pixel. (0,0) if omitted.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImagePosition(position)

Sets the background image position for this Element.

Parameters:
Name Type Description
position olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node

The position.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImagePositionMode(positionMode)

Sets the position mode for the background image of this Element.

Parameters:
Name Type Description
positionMode olympe.ui.common.BackgroundImagePosition | olympe.df.Proxy | olympe.df.Node

The positioning mode for this image.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImageSize(size)

Sets the background image size for the this Element.

Parameters:
Name Type Description
size olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node

The image size, in pixels.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImageSizeMode(sizeMode)

Sets the sizing mode for the background image of this Element.

Parameters:
Name Type Description
sizeMode olympe.ui.common.BackgroundImageSize | olympe.df.Proxy | olympe.df.Node

The sizing mode.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBackgroundImageSrc(src)

Sets the URL (or source) for the background image.

Parameters:
Name Type Description
src olympe.df.POString | olympe.df.Node | string

URL for the image.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBlur()

Removes focus from this Element.

Warnings:

  • Focus may not be applicable on some elements, depending on the platform.
  • Elements not inside a container (screen, etc.) can't get the focus.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setBorder(width, color)

Sets the border width & color for this element. a width of 0 means no visible border.

Parameters:
Name Type Description
width olympe.df.ONumber | number | olympe.df.Node | olympe.df.Proxy

the width, in pixels, for the border
color olympe.df.Color | olympe.df.Node | olympe.df.Proxy

the color for the border
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setBorderColor(color)

Set the border color on this element.

Parameters:
Name Type Description
color olympe.df.Color | olympe.df.Proxy.<olympe.df.Color>
Inherited From:
Overrides:
Returns:
Type
olympe.ui.std.DockableElement

setBorderWidth(width)

Set the border width on this element. a width of 0 means no visible border.

Parameters:
Name Type Description
width number | olympe.df.PONumber
Inherited From:
Overrides:
Returns:
Type
olympe.ui.std.DockableElement

setContent(image)

Draws an image onto the canvas.

Parameters:
Name Type Description
image olympe.ui.bitmap.Image

An image to draw into the context.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

setContextMenuEnabled(enabled)

Enable/disable context menu on this element.

Parameters:
Name Type Description
enabled boolean

true to enable the context menu, false to disable it.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setCornerRadius(radius)

Sets the rounded corner radius (in pixels) for this element.

Parameters:
Name Type Description
radius olympe.df.PONumber | olympe.df.Node | number

Radius in pixels.
Inherited From:
Overrides:
Returns:

this DockableElement.

Type
olympe.ui.std.DockableElement

setDimension(dimension)

Sets the dimension (width, height) for this element.

Parameters:
Name Type Description
dimension olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node

Dimension of this element.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setFillStyle(fillStyle)

Specifies the color to use inside shapes. The default style is #000 (black).

Parameters:
Name Type Description
fillStyle olympe.df.POString | string

color
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

setFillStyleGradient(gradient)

Specifies the gradient to use inside shapes. The default style is #000 (black).

Parameters:
Name Type Description
gradient olympe.ui.std.Gradient

The gradient.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

setFocus()

Gives the focus to this Element.

Warnings:

  • Focus may not be applicable on some elements, depending on the platform.
  • Elements not inside a container (screen, etc.) can't get the focus.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setFont(font)

Sets the current text style to use when drawing text. This string uses the same syntax as the CSS font specifier. The default font is 10px sans-serif.

TODO implement the font as a CSS font object

Parameters:
Name Type Description
font olympe.df.POString | string

The font.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

setGlobalCompositeOperation(globalCompositeOperation)

Sets the type of compositing operation to apply when drawing new shapes.

Parameters:
Name Type Description
globalCompositeOperation olympe.df.POString | string

A String identifying which of the compositing or blending mode operations to use.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

setHidden(hidden)

Sets whether this Element is hidden or not. A hidden element will not appear on the screen.

Parameters:
Name Type Description
hidden olympe.df.POBoolean | boolean | olympe.df.Node

true if content must be hidden, false otherwise.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setIgnoreUserInteraction( [ignore])

Disables mouse events for this element. However, mouse events will target its descendants unless they are manually set to also ignore user interactions.

Parameters:
Name Type Argument Default Description
ignore boolean | olympe.df.POBoolean <optional>
 false

ignore true to make this element ignore mouse events and pass them to its children.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setLineCap(lineCap)

Determines the shape used to draw the end points of lines (butt, round or square). There are 3 possible values:

  • Butt: The ends of lines are squared off at the endpoints. Default value.
  • Round: The ends of lines are rounded.
  • Square: The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
Parameters:
Name Type Description
lineCap olympe.ui.common.LineCapMode

The 'cap' shape.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

setLineJoin(lineJoin)

Sets the shape used to join two line segments where they meet. There are 3 possible values:

  • Round: Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to the line width.
  • Bevel: Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
  • Miter: Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is affected by the miterLimit property. Default value.

This property has no effect wherever two connected segments have the same direction, because no joining area will be added in this case. Degenerate segments with a length of zero (i.e., with all endpoints and control points at the exact same position) are also ignored.

Parameters:
Name Type Description
lineJoin olympe.ui.common.LineJoinMode

The 'join' shape.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

setLineWidth(lineWidth)

Sets the thickness of lines, specified in coordinate space units. Zero, negative, Infinity, and NaN values are ignored. This value is 1.0 by default.

Parameters:
Name Type Description
lineWidth olympe.df.PONumber | number

The line width.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

setOpacity(opacity)

Sets the opacity, or alpha channel, for this Element. This is a float value between 0 and 1. 0 being transparent and 1 being opaque.

Parameters:
Name Type Description
opacity olympe.df.ONumber | number | olympe.df.Proxy | olympe.df.Node

the opacity (between 0 and 1).
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setParent(parent)

Sets the parent of this element.

Important: This method must be called when this element is added to a container or layout.

Parameters:
Name Type Description
parent olympe.df.Proxy.<olympe.ui.std.Element> | olympe.ui.std.Element

The parent for this element.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setPosition(position)

Sets the position (x,y) for this Element.

Parameters:
Name Type Description
position olympe.df.Vector2 | olympe.df.Proxy | olympe.df.Node

The position of this element.
Inherited From:
Overrides:
Returns:

this DockableElement.

Type
olympe.ui.std.DockableElement

setRotationAngle(angle)

Sets the rotation angle (in degree) for this element.

Parameters:
Name Type Description
angle olympe.df.ONumber | number | olympe.df.Node | olympe.df.Proxy

the angle, in degree.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setScale(scale)

Sets the scaling factor for the width and height of this element.

Parameters:
Name Type Description
scale olympe.df.PVector2 | olympe.df.Node

scaling vector (w, h).
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setShadow( [offset] [, radius] [, spread] [, color] [, inset])

Set shadow on this DockableElement. A shadow is defined by its offset, the blur radius, the spread radius (all in pixels) and a base color. A shadow is by default 'external, but can be made internal by setting the 'inset' parameter to true`.

Parameters:
Name Type Argument Default Description
offset olympe.df.Vector2 | olympe.df.Node | olympe.df.Proxy.<olympe.df.Vector2> <optional>
 0

Offset in pixels.
radius olympe.df.PONumber | olympe.df.Node | number <optional>
 0

Blur radius in pixels.
spread olympe.df.PONumber | olympe.df.Node | number <optional>
 0

Spread in pixels.
color olympe.df.Color | olympe.df.Node | olympe.df.Proxy.<olympe.df.Color> <optional>
 '#000000'

Shadow color.
inset olympe.df.POBoolean | olympe.df.Node | boolean <optional>
 false

true if the shadow is inset.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setShadowPSStyle(color, angle, distance, spread, size, inset)

Set shadow on this DockableElement as done in Photoshop.

Parameters:
Name Type Description
color olympe.df.Color | olympe.df.Node | olympe.df.Proxy.<olympe.df.Color>

Shadow Color.
angle olympe.df.PONumber | olympe.df.Node | number

Angle, in radians.
distance olympe.df.PONumber | olympe.df.Node | number

Distance, in pixels.
spread olympe.df.PONumber | olympe.df.Node | number

Spread in pixels.
size olympe.df.PONumber | olympe.df.Node | number

Size, in pixels.
inset olympe.df.POBoolean | olympe.df.Node | boolean

true if the shadow is inset.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setStrokeStyle(style)

Specifies the color to use for strokes. The default style is #000 (black).

Parameters:
Name Type Description
style olympe.df.POString | string

color
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

setStyle(style, value)

Parameters:
Name Type Description
style string

CSS style name
value string | number

CSS style value
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setTabIndex(tabIndex)

Sets the tab index to this Element. Tab Index defines the tabulation or 'next' order while going through a form.

Parameters:
Name Type Description
tabIndex olympe.df.PONumber | olympe.df.ONumber | number | olympe.df.Node

The tab index.
Inherited From:
Overrides:
Returns:

this Element.

Type
olympe.ui.std.Element

setThemeClass(themeClass)

Method to override if this dockable element supports themes.

Parameters:
Name Type Description
themeClass olympe.df.POString | olympe.df.Node | string

The theme class.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setTooltip(text [, options])

Assigns a tooltip to that element that will show up when the mouse hovers over it.

Parameters:
Name Type Argument Description
text olympe.df.POString

The text of the tooltip.
options Object <optional>

Various options for displaying the tooltip.

Properties
Name Type Argument Description
position olympe.df.PVector2 <optional>

The absolute position of the tooltip.
background olympe.df.PColor <optional>

The background color.
foreground olympe.df.PColor <optional>

The text color.
fontSize olympe.df.PONumber <optional>

The font size.
borderSize olympe.df.PONumber <optional>

The size of the border. Default is 1.
borderColor olympe.df.PColor <optional>

The color of the border. Default is black.
delay olympe.df.ONumber | number <optional>

The delay, in milliseconds, before showing the tooltip. Default is 500.
startingPos olympe.df.Vector2 <optional>

The starting position of the mouse. Default is (0,0).
theme olympe.df.POString <optional>

The theme class to apply to this tooltip.
Inherited From:
Overrides:
Returns:

This Element.

Type
olympe.ui.std.Element

setUniformScale(scale)

Sets the scaling factor for this element.

Parameters:
Name Type Description
scale olympe.df.PONumber | olympe.df.Node | number

The scaling factor.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

setZIndex(zIndex)

Sets the z-index for this element. This determines how elements are layered when they overlap on the screen. Higher Z-index elements are placed on top of lower Z-index elements.

Parameters:
Name Type Description
zIndex olympe.df.PONumber | olympe.df.Node | number

Index of element on z axis.
Inherited From:
Overrides:
Returns:

This DockableElement.

Type
olympe.ui.std.DockableElement

stroke()

Strokes (outlines) the current or given path with the current stroke style.

Strokes are aligned to the center of a path; in other words, half of the stroke is drawn on the inner side, and half on the outer side.

The stroke is drawn using the non-zero winding rule, which means that path intersections will still get filled.

Returns:

This Canvas.

Type
olympe.ui.std.Canvas

strokeRect(x, y, w, h)

draws a rectangle that is stroked (outlined) according to the current strokeStyle and other context settings.

This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it.

Parameters:
Name Type Description
x olympe.df.PONumber | number

The x-axis coordinate of the rectangle's starting point.
y olympe.df.PONumber | number

The y-axis coordinate of the rectangle's starting point.
w olympe.df.PONumber | number

The rectangle's width. Positive values are to the right, and negative to the left.
h olympe.df.PONumber | number

The rectangle's height. Positive values are down, and negative are up.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas

strokeText(text, x, y [, maxWidth])

Strokes — that is, draws the outlines of — the characters of a text string at the specified coordinates. An optional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.

This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it.

Parameters:
Name Type Argument Default Description
text olympe.df.POString | string

The text string to render into the context.
x olympe.df.PONumber | number

The x-axis coordinate of the point at which to begin drawing the text, in pixels.
y olympe.df.PONumber | number

The y-axis coordinate of the point at which to begin drawing the text, in pixels.
maxWidth olympe.df.PONumber | number <optional>
 no-limit

The maximum number of pixels wide the text may be once rendered.
Returns:

This Canvas.

Type
olympe.ui.std.Canvas