Class: CanvasRenderer

me. CanvasRenderer

new CanvasRenderer(canvas, width, height, options)

a canvas renderer object
Parameters:
Name Type Argument Description
canvas Canvas 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 70

<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 99

<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 119

<static> createPattern(image, repeat) → {CanvasPattern}

Create a pattern with the specified repition
Parameters:
Name Type Description
image image Source image
repeat String Define how the pattern should be repeated
Source:
canvas_renderer.js, line 134
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, dw, dh)

Draw an image using the canvas api
Parameters:
Name Type Description
image image Source image
sx Number Source x-coordinate
sy Number Source y-coordinate
sw Number Source width
sh Number Source height
dx Number Destination x-coordinate
dy Number Destination y-coordinate
dw Number Destination width
dh Number Destination height
Source:
canvas_renderer.js, line 153
Example
// Can be used in three ways:
renderer.drawImage(image, dx, dy);
renderer.drawImage(image, dx, dy, dw, dh);
renderer.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
// dx, dy, dw, dh being the destination target & dimensions. sx, sy, sw, sh being the position & dimensions to take from the image

<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 205
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 539

<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 228

<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 254

<static> flush()

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

<static> getContext() → {Context2d}

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

<static> resetTransform()

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

<static> restore()

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

<static> rotate(angle)

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

<static> save()

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

<static> scale(x, y)

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

<static> scaleCanvas()

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

<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 370

<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 386

<static> setLineWidth(width)

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

<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 573

<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 408

<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 433

<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 472

<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 494

<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 521

<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 586

<static> translate(x, y)

Translates the context to the given position
Parameters:
Name Type Description
x Number
y Number
Source:
canvas_renderer.js, line 613
Copyright © 2011 - 2017, Olivier Biot, Jason Oster, Aaron McLeod
Documentation generated by JSDoc 3.4.0 on 2017-02-28T11:37:40+08:00 using the DocStrap template modified by codename-.