me.CanvasRenderer(canvas, width, height, optionsopt)

new CanvasRenderer(canvas, width, height, optionsopt)

a canvas renderer object

Parameters:
Name Type Attributes Description
canvas HTMLCanvasElement

The html canvas tag to draw to on screen.

width Number

The width of the canvas without scaling

height Number

The height of the canvas without scaling

options Object <optional>

The renderer parameters

Properties
Name Type Attributes Default Description
doubleBuffering Boolean <optional>
false

Whether to enable double buffering

antiAlias Boolean <optional>
false

Whether to enable anti-aliasing

transparent Boolean <optional>
false

Whether to enable transparency on the canvas (performance hit when enabled)

subPixel Boolean <optional>
false

Whether to enable subpixel renderering (performance hit when enabled)

textureSeamFix Boolean <optional>
true

enable the texture seam fix when rendering Tile when antiAlias is off for the canvasRenderer

zoomX Number <optional>
width

The actual width of the canvas with scaling applied

zoomY Number <optional>
height

The actual height of the canvas with scaling applied

Extends

Members

settings :Object

The given constructor options

Inherited From:

Methods

clear()

prepare the framebuffer for drawing a new frame

Overrides:

clearColor(color, opaqueopt)

Clears the main framebuffer with the given color

Parameters:
Name Type Attributes Default Description
color me.Color | String

CSS color.

opaque Boolean <optional>
false

Allow transparency [default] or clear the surface completely [true]

clearMask()

disable (remove) the rendering mask set through setMask.

Overrides:
See:
  • setMask

clearRect(x, y, width, height)

Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).

Parameters:
Name Type Description
x Number

x axis of the coordinate for the rectangle starting point.

y Number

y axis of the coordinate for the rectangle starting point.

width Number

The rectangle's width.

height Number

The rectangle's height.

clearTint()

clear the rendering tint set through setTint.

Inherited From:
See:
  • setTint

clipRect(x, y, width, height)

clip the given region from the original canvas. Once a region is clipped, all future drawing will be limited to the clipped region. You can however save the current region using the save(), and restore it (with the restore() method) any time in the future. (this is an experimental feature !)

Parameters:
Name Type Description
x Number
y Number
width Number
height Number

createPattern(image, repeat) → {CanvasPattern}

Create a pattern with the specified repetition

Parameters:
Name Type Description
image image

Source image

repeat String

Define how the pattern should be repeated

Returns:
CanvasPattern
See:
Example
var tileable   = renderer.createPattern(image, "repeat");
var horizontal = renderer.createPattern(image, "repeat-x");
var vertical   = renderer.createPattern(image, "repeat-y");
var basic      = renderer.createPattern(image, "no-repeat");

drawImage(image, sx, sy, sw, sh, dx, dy, dWidth, dHeight)

Draw an image onto the main using the canvas api

Parameters:
Name Type Description
image Image

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.

sx Number

The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sy Number

The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

sw Number

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 sx and sy to the bottom-right corner of the image is used.

sh Number

The height of the sub-rectangle of the source image to draw into the destination context.

dx Number

The X coordinate in the destination canvas at which to place the top-left corner of the source image.

dy Number

The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

dWidth 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.

dHeight 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.

Example
// Position the image on the canvas:
renderer.drawImage(image, dx, dy);
// Position the image on the canvas, and specify width and height of the image:
renderer.drawImage(image, dx, dy, dWidth, dHeight);
// Clip the image and position the clipped part on the canvas:
renderer.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

drawPattern(pattern, x, y, width, height)

Draw a pattern within the given rectangle.

Parameters:
Name Type Description
pattern CanvasPattern

Pattern object

x Number
y Number
width Number
height Number
See:

fill(shape)

fill the given shape

Parameters:
Name Type Description
shape me.Rect | me.Polygon | me.Line | me.Ellipse

a shape object to fill

Inherited From:

fillArc(x, y, radius, start, end, antiClockwiseopt)

Fill an arc at the specified coordinates with given radius, start and end points

Parameters:
Name Type Attributes Default Description
x Number

arc center point x-axis

y Number

arc center point y-axis

radius Number
start Number

start angle in radians

end Number

end angle in radians

antiClockwise Boolean <optional>
false

draw arc anti-clockwise

fillEllipse(x, y, w, h)

Fill an ellipse at the specified coordinates with given radius

Parameters:
Name Type Description
x Number

ellipse center point x-axis

y Number

ellipse center point y-axis

w Number

horizontal radius of the ellipse

h Number

vertical radius of the ellipse

fillLine(startX, startY, endX, endY)

Fill a line of the given two points

Parameters:
Name Type Description
startX Number

the start x coordinate

startY Number

the start y coordinate

endX Number

the end x coordinate

endY Number

the end y coordinate

fillPolygon(poly)

Fill the given me.Polygon on the screen

Parameters:
Name Type Description
poly me.Polygon

the shape to draw

fillRect(x, y, width, height)

Draw a filled rectangle at the specified coordinates

Parameters:
Name Type Description
x Number
y Number
width Number
height Number

flush()

render the main framebuffer on screen

getBlendMode() → {String}

returns the current blend mode for this renderer

Returns:
String -

blend mode

Inherited From:

getBounds() → {me.Rect}

returns the bounds (size and position) of the parent container

Returns:
me.Rect
Inherited From:

getCanvas() → {HTMLCanvasElement}

return a reference to the system canvas

Returns:
HTMLCanvasElement
Inherited From:

getColor(current)

get the current fill & stroke style color.

Parameters:
Name Type Description
current me.Color

global color

Inherited From:

getContext() → {CanvasRenderingContext2D}

return a reference to the system 2d Context

Returns:
CanvasRenderingContext2D

getContext2d(canvas, transparentopt) → {Context2d}

Returns the 2D Context object of the given Canvas
Also configures anti-aliasing and blend modes based on constructor options.

Parameters:
Name Type Attributes Default Description
canvas HTMLCanvasElement
transparent Boolean <optional>
true

use false to disable transparency

Returns:
Context2d
Inherited From:

getHeight() → {Number}

return the height of the system Canvas

Returns:
Number
Inherited From:

getScreenCanvas() → {HTMLCanvasElement}

return a reference to the screen canvas

Returns:
HTMLCanvasElement
Inherited From:

getScreenContext() → {Context2d}

return a reference to the screen canvas corresponding 2d Context
(will return buffered context if double buffering is enabled, or a reference to the Screen Context)

Returns:
Context2d
Inherited From:

getWidth() → {Number}

return the width of the system Canvas

Returns:
Number
Inherited From:

globalAlpha() → {Number}

return the current global alpha

Returns:
Number
Inherited From:

overlaps(rect) → {boolean}

check if the given rectangle overlaps with the renderer screen coordinates

Parameters:
Name Type Description
rect me.Rect
Returns:
boolean -

true if overlaps

Inherited From:

reset()

Reset context state

Overrides:

resetTransform()

Reset the canvas transform to identity

resize(width, height)

resizes the system canvas

Parameters:
Name Type Description
width Number

new width of the canvas

height Number

new height of the canvas

Inherited From:

restore()

restores the canvas context

rotate(angle)

rotates the canvas context

Parameters:
Name Type Description
angle Number

in radians

save()

save the canvas context

scale(x, y)

scales the canvas context

Parameters:
Name Type Description
x Number
y Number

scaleCanvas()

scales the canvas & 2d Context

setAntiAlias(context, enableopt)

enable/disable image smoothing (scaling interpolation) for the given context

Parameters:
Name Type Attributes Default Description
context Context2d
enable Boolean <optional>
false
Inherited From:

setBlendMode(modeopt, contextopt)

Set a blend mode for the given context

Parameters:
Name Type Attributes Default Description
mode String <optional>
"normal"

blend mode : "normal", "multiply"

context Context2d <optional>

setColor(color)

Set the current fill & stroke style color. By default, or upon reset, the value is set to #000000.

Parameters:
Name Type Description
color me.Color | String

css color value

setGlobalAlpha(alpha)

Set the global alpha on the canvas context

Parameters:
Name Type Description
alpha Number

0.0 to 1.0 values accepted.

setLineWidth(width)

Set the line width on the context

Parameters:
Name Type Description
width Number

Line width

setMask(maskopt)

A mask limits rendering elements to the shape and position of the given mask object. So, if the renderable is larger than the mask, only the intersecting part of the renderable will be visible. Mask are not preserved through renderer context save and restore.

Parameters:
Name Type Attributes Description
mask me.Rect | me.Polygon | me.Line | me.Ellipse <optional>

the shape defining the mask to be applied

Overrides:

setTint(tintopt)

set a rendering tint (WebGL only) for sprite based renderables.

Parameters:
Name Type Attributes Description
tint me.Color <optional>

the tint color

Inherited From:

setTransform(mat2d)

Reset (overrides) the renderer transformation matrix to the identity one, and then apply the given transformation matrix.

Parameters:
Name Type Description
mat2d me.Matrix2d

Matrix to transform by

stroke(shape)

stroke the given shape

Parameters:
Name Type Description
shape me.Rect | me.Polygon | me.Line | me.Ellipse

a shape object to stroke

Inherited From:

strokeArc(x, y, radius, start, end, antiClockwiseopt)

Stroke an arc at the specified coordinates with given radius, start and end points

Parameters:
Name Type Attributes Default Description
x Number

arc center point x-axis

y Number

arc center point y-axis

radius Number
start Number

start angle in radians

end Number

end angle in radians

antiClockwise Boolean <optional>
false

draw arc anti-clockwise

strokeEllipse(x, y, w, h)

Stroke an ellipse at the specified coordinates with given radius

Parameters:
Name Type Description
x Number

ellipse center point x-axis

y Number

ellipse center point y-axis

w Number

horizontal radius of the ellipse

h Number

vertical radius of the ellipse

strokeLine(startX, startY, endX, endY)

Stroke a line of the given two points

Parameters:
Name Type Description
startX Number

the start x coordinate

startY Number

the start y coordinate

endX Number

the end x coordinate

endY Number

the end y coordinate

strokePolygon(poly)

Stroke the given me.Polygon on the screen

Parameters:
Name Type Description
poly me.Polygon

the shape to draw

strokeRect(x, y, width, height)

Stroke a rectangle at the specified coordinates

Parameters:
Name Type Description
x Number
y Number
width Number
height Number

transform(mat2d)

Multiply given matrix into the renderer tranformation matrix

Parameters:
Name Type Description
mat2d me.Matrix2d

Matrix to transform by

translate(x, y)

Translates the context to the given position

Parameters:
Name Type Description
x Number
y Number

updateBounds()

update the bounds (size and position) of the parent container. (this can be manually called in case of manual page layout modification not triggering a resize event)

Inherited From: