Class: CanvasRenderer

me. CanvasRenderer

new CanvasRenderer(canvas, width, height, options)

a canvas renderer object
Parameters:
Name Type Argument 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 Argument 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
Source:
canvas_renderer.js, line 28

Extends

Classes

Texture

Methods

<static> clear()

prepare the framebuffer for drawing a new frame
Source:
canvas_renderer.js, line 115

<static> clearColor(color, opaque)

Clears the main framebuffer with the given color
Parameters:
Name Type Argument Default Description
color me.Color | String CSS color.
opaque Boolean <optional>
false Allow transparency [default] or clear the surface completely [true]
Source:
canvas_renderer.js, line 144

<static> clearRect(x, y, width, height)

Sets all pixels in the given rectangle to transparent black,
erasing any previously drawn content.
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.
Source:
canvas_renderer.js, line 161

<static> 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
Source:
canvas_renderer.js, line 671

<static> 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
Source:
canvas_renderer.js, line 176
See:
Returns:
Type
CanvasPattern
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");

<static> 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.
Source:
canvas_renderer.js, line 195
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);

<static> 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
Source:
canvas_renderer.js, line 251
See:
  • me.CanvasRenderer#createPattern

<static> drawShape(shape)

draw the given shape
Parameters:
Name Type Description
shape me.Rect | me.Polygon | me.Line | me.Ellipse a shape object
Source:
canvas_renderer.js, line 581

<static> fillArc(x, y, radius, start, end, antiClockwise)

Fill an arc at the specified coordinates with given radius, start and end points
Parameters:
Name Type Argument 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
Source:
canvas_renderer.js, line 274

<static> 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
Source:
canvas_renderer.js, line 300

<static> flush()

render the main framebuffer on screen
Source:
canvas_renderer.js, line 127

<static> getContext() → {CanvasRenderingContext2D}

return a reference to the system 2d Context
Source:
canvas_renderer.js, line 318
Returns:
Type
CanvasRenderingContext2D

<static> resetTransform()

resets the canvas transform to identity
Source:
canvas_renderer.js, line 82

<static> restore()

restores the canvas context
Source:
canvas_renderer.js, line 374

<static> rotate(angle)

rotates the canvas context
Parameters:
Name Type Description
angle Number in radians
Source:
canvas_renderer.js, line 389

<static> save()

save the canvas context
Source:
canvas_renderer.js, line 364

<static> scale(x, y)

scales the canvas context
Parameters:
Name Type Description
x Number
y Number
Source:
canvas_renderer.js, line 400

<static> scaleCanvas()

scales the canvas & 2d Context
Source:
canvas_renderer.js, line 338

<static> setBlendMode(mode, context)

set a blend mode for the given context
Parameters:
Name Type Argument Default Description
mode String <optional>
"normal" blend mode : "normal", "multiply"
context Context2d <optional>
Source:
canvas_renderer.js, line 92

<static> setColor(color)

Sets the fill & stroke style colors for the context.
Parameters:
Name Type Description
color me.Color | String css color value
Source:
canvas_renderer.js, line 412

<static> setGlobalAlpha(alpha)

Sets the global alpha on the canvas context
Parameters:
Name Type Description
alpha Number 0.0 to 1.0 values accepted.
Source:
canvas_renderer.js, line 428

<static> setLineWidth(width)

sets the line width on the context
Parameters:
Name Type Description
width Number Line width
Source:
canvas_renderer.js, line 439

<static> setTransform(mat2d)

Resets (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
Source:
canvas_renderer.js, line 615

<static> strokeArc(x, y, radius, start, end, antiClockwise)

Stroke an arc at the specified coordinates with given radius, start and end points
Parameters:
Name Type Argument 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
Source:
canvas_renderer.js, line 450

<static> strokeEllipse(x, y, w, h)

Stroke an ellipse at the specified coordinates with given radius, start and end points
Parameters:
Name Type Description
x Number arc center point x-axis
y Number arc center point y-axis
w Number horizontal radius of the ellipse
h Number vertical radius of the ellipse
Source:
canvas_renderer.js, line 475

<static> 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
Source:
canvas_renderer.js, line 514

<static> strokePolygon(poly)

Strokes a me.Polygon on the screen with a specified color
Parameters:
Name Type Description
poly me.Polygon the shape to draw
Source:
canvas_renderer.js, line 536

<static> strokeRect(x, y, width, height)

Stroke a rectangle at the specified coordinates with a given color
Parameters:
Name Type Description
x Number
y Number
width Number
height Number
Source:
canvas_renderer.js, line 563

<static> transform(mat2d)

Multiply given matrix into the renderer tranformation matrix
Parameters:
Name Type Description
mat2d me.Matrix2d Matrix to transform by
Source:
canvas_renderer.js, line 628

<static> translate(x, y)

Translates the context to the given position
Parameters:
Name Type Description
x Number
y Number
Source:
canvas_renderer.js, line 655