Class: Canvas

rune.display.Canvas(widthopt, heightopt)

The Canvas class is a pixel buffer for 32-bit raster graphics and contains methods for manipulating the pixels included in the buffer. The class is used to represent all display objects and their current graphic state, ie. all display objects have their own pixel buffer (Canvas).

Constructor

new Canvas(widthopt, heightopt)

Creates a new (Rune) Canvas.
Parameters:
Name Type Attributes Description
width number <optional>
 The width of the object, specified in pixels.
height number <optional>
 The height of the object, specified in pixels.
Source:

Members

(readonly) context :Object

The HTMLCanvasElement used to draw the pixel buffer.
Type:
  • Object
Source:

(readonly) element :Element

The HTMLCanvasElement that represents the pixel buffer.
Type:
  • Element
Source:

height :number

The height of the pixel buffer.
Type:
  • number
Source:

smoothing :boolean

Controls whether or not the canvas is smoothed when scaled. If true, the canvas is smoothed when scaled. If false, the canvas is not smoothed when scaled.
Type:
  • boolean
Default Value:
  • false
Source:

width :number

The width of the pixel buffer.
Type:
  • number
Source:

Methods

attach(element) → {undefined}

Appends the HTMLCanvasElement to the specified DOMElement.
Parameters:
Name Type Description
element HTMLElement DOMElement to append to.
Source:
Returns:
Type
undefined

clear() → {undefined}

Clears the pixel buffer, ie. the value of each pixel is set to 0x00000000.
Source:
Returns:
Type
undefined

detach() → {undefined}

Removes the HTMLCanvasElement from the current DOMElement, ie. his parent.
Source:
Returns:
Type
undefined

dispose() → {undefined}

Frees memory that is used to store the pixel buffer object.
Source:
Returns:
Type
undefined

drawArc(x, y, r, sa, ea, c, s, aopt) → {undefined}

creates a circular arc centered at (x, y) with a radius of r. The path starts at sa, ends at ea, and travels in the direction given by counterclockwise (defaulting to clockwise).
Parameters:
Name Type Attributes Description
x number The horizontal coordinate of the arc's center.
y number The vertical coordinate of the arc's center.
r number The arc's radius. Must be positive.
sa number The angle at which the arc starts in radians, measured from the positive x-axis.
ea number The angle at which the arc ends in radians, measured from the positive x-axis.
c number The color of the line.
s number The thickness (size) of the line.
a number <optional>
 An optional boolean value. If true, draws the arc counter-clockwise between the start and end angles. The default is false (clockwise).
Source:
Returns:
Type
undefined

drawFill(c) → {undefined}

Fills a rectangular area of pixels with a specified ARGB color.
Parameters:
Name Type Description
c string Fill color.
Source:
Returns:
Type
undefined

drawImage(img, ox, oy, ow, oh, cxopt, cyopt, cwopt, chopt) → {undefined}

Draws a 32-bit image to the current pixel buffer.
Parameters:
Name Type Attributes Description
img HTMLImageElement An element to draw into the context. The specification permits any canvas image source (CanvasImageSource), specifically, a CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas.
ox number The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
oy number The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
ow number The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
oh number The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
cx number <optional>
 The x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
cy number <optional>
 The y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
cw number <optional>
 The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by ox and oy to the bottom-right corner of the image is used.
ch number <optional>
 The height of the sub-rectangle of the source image to draw into the destination context.
Source:
Returns:
Type
undefined

drawImageFill(img, x, y, w, h) → {undefined}

Draws a picture according to a repeating (tile) pattern.
Parameters:
Name Type Description
img HTMLImageElement An element to draw into the context.
x number The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
y number The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
w number The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.
h number The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.
Source:
Returns:
Type
undefined

drawLine(x1, y1, x2, y2, c, s, a) → {undefined}

Draws a straight line between two points.
Parameters:
Name Type Description
x1 number the x-coordinate of the first point.
y1 number the y-coordinate of the first point.
x2 number the x-coordinate of the second point.
y2 number the y-coordinate of the second point.
c string The color of the line.
s number The thickness (size) of the line.
a number The transparency of the line.
Source:
Returns:
Type
undefined

drawRect(x, y, w, h, c, s) → {undefined}

Draws a rectangle.
Parameters:
Name Type Description
x number The x-position of the rectangle.
y number The y-position of the rectangle.
w number The width of the rectangle.
h number The height of the rectangle.
c string The color of the rectangle.
s number The thickness (size) of the lines of the rectangle.
Source:
Returns:
Type
undefined

drawRectFill(x, y, w, h, c, a) → {undefined}

Draws a filled rectangle.
Parameters:
Name Type Description
x number The x-position of the rectangle.
y number The y-position of the rectangle.
w number The width of the rectangle.
h number The height of the rectangle.
c string The color of the rectangle.
a number Transparency of the color.
Source:
Returns:
Type
undefined

intersects(rect) → {boolean}

Determines whether the object specified in the rect parameter intersects with this canvas object.
Parameters:
Name Type Description
rect rune.geom.Rectangle The Rectangle object to compare against.
Source:
Returns:
A value of true if the specified object intersects with this Rectangle object; otherwise false.
Type
boolean

renderDisplayObject(obj, offsetXopt, offsetYopt) → {undefined}

Renders a Display Object according to its visual properties. The rendering process includes rendering of any sub-objects, etc..
Parameters:
Name Type Attributes Description
obj rune.display.DisplayObject The object to be rendered.
offsetX number <optional>
 Render offset in x direction.
offsetY number <optional>
 Render offset in y direction.
Source:
Returns:
Type
undefined

renderPath(path, offsetXopt, offsetYopt) → {undefined}

Renders a Path object as a series of connected lines.
Parameters:
Name Type Attributes Description
path rune.util.Path Path to render.
offsetX number <optional>
 Displacement in x direction.
offsetY number <optional>
 Displacement in y direction.
Source:
Returns:
Type
undefined

renderTiles(map, rect, buffer) → {undefined}

Renders Tiles from a Tilemap.
Parameters:
Name Type Description
map rune.tilemap.Tilemap The map to be rendered.
rect rune.geom.Rectangle Which part of the map to render.
buffer number Index to the buffer (layer) to be rendered.
Source:
Returns:
Type
undefined

resize(width, height) → {undefined}

Resizes the canvas object to specified dimensions.
Parameters:
Name Type Description
width number The new width of the canvas.
height number The new height of the canvas.
Source:
Returns:
Type
undefined