Class CanvasRenderer

a canvas renderer object

Hierarchy (view full)

Renderer
- CanvasRenderer

Index

Constructors

Properties

backgroundColor cache currentColor currentTint depthTest designRatio isContextValid path2D projectionMatrix renderTarget scaleRatio settings type uvOffset

Accessors

height lineJoin lineWidth width

Constructors

constructor

new CanvasRenderer(options?): CanvasRenderer
Parameters
- Optionaloptions: any
  optional parameters for the renderer
Returns CanvasRenderer
Overrides Renderer.constructor
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:28

Properties

backgroundColor

backgroundColor: Color

The background color used to clear the main framebuffer. Note: alpha value will be set based on the transparent property of the renderer settings.

Default

black

cache

cache: TextureCache

currentColor

currentColor: Color

currentTint

currentTint: Color

depthTest

depthTest: string

the default method to sort object ("sorting", "z-buffer")

Default

"sorting"

designRatio

designRatio: number

the requested video size ratio

isContextValid

isContextValid: boolean

true if the current rendering context is valid

Default

true

path2D

path2D: Path2D

The Path2D instance used by the renderer to draw primitives

projectionMatrix

projectionMatrix: Matrix3d

renderTarget

renderTarget: CanvasRenderTarget

The renderer renderTarget

Name

renderTarget

scaleRatio

scaleRatio: Vector2d

the scaling ratio to be applied to the main canvas

Default

<1,1>

settings

settings: object

The given constructor options

type

type: string

The renderer type : Canvas, WebGL, etc... (override this property with a specific value when implementing a custom renderer)

uvOffset

uvOffset: number

Accessors

height

get height(): number
return the height of the canvas which this renderer draws to

Returns number
height of the system Canvas
Inherited from Renderer.height
- Defined in packages/melonjs/src/video/renderer.js:137
set height(value): void
Parameters
- value: number
Returns void
Inherited from Renderer.height
- Defined in packages/melonjs/src/video/renderer.js:141

lineJoin

get lineJoin(): string
sets or returns the shape used to join two line segments where they meet. There are three possible values for this property: "round", "bevel", and "miter"

Returns string
Default
```
"miter"
```
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:711

lineWidth

get lineWidth(): number
sets or returns the thickness of lines for shape drawing

Returns number
Default
```
1
```
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:694

width

get width(): number
return the width of the canvas which this renderer draws to

Returns number
width of the system Canvas
Inherited from Renderer.width
- Defined in packages/melonjs/src/video/renderer.js:149
set width(value): void
Parameters
- value: number
Returns void
Inherited from Renderer.width
- Defined in packages/melonjs/src/video/renderer.js:153

Methods

beginPath

beginPath(): void

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

Returns void

Example

// First path
renderer.beginPath();
renderer.setColor("blue");
renderer.moveTo(20, 20);
renderer.lineTo(200, 20);
renderer.stroke();
// Second path
renderer.beginPath();
renderer.setColor("green");
renderer.moveTo(20, 20);
renderer.lineTo(120, 120);
renderer.stroke();

clear

clear(): void
prepare the framebuffer for drawing a new frame

Returns void
Overrides Renderer.clear
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:131

clearColor

clearColor(color?, opaque?): void
Clears the main framebuffer with the given color
Parameters
- Optionalcolor: string | Color = "#000000"
  CSS color.
- Optionalopaque: boolean = false
  Allow transparency [default] or clear the surface completely [true]
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:142

clearMask

clearMask(): void
disable (remove) the rendering mask set through setMask.

Returns void
See
CanvasRenderer#setMask
Overrides Renderer.clearMask
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:921

clearRect

clearRect(x, y, width, height): void
Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).
Parameters
- 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.
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:162

clearTint

clearTint(): void
clear the rendering tint set through setTint.

Returns void
See
Renderer#setTint
Inherited from Renderer.clearTint
- Defined in packages/melonjs/src/video/renderer.js:393

clipRect

clipRect(x, y, width, height): void
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
- x: number
- y: number
- width: number
- height: number
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:792

closePath

closePath(): void
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 void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:350

createPattern

createPattern(image, repeat): CanvasPattern
Create a pattern with the specified repetition
Parameters
- image:
      | OffscreenCanvas
      | ImageBitmap
      | VideoFrame
      | HTMLCanvasElement
      | HTMLImageElement
      | SVGImageElement
      | HTMLVideoElement
  Source image to be used as the pattern's image
- repeat: string
  Define how the pattern should be repeated
Returns CanvasPattern
See
ImageLayer#repeat

Example
```
let tileable   = renderer.createPattern(image, "repeat");
let horizontal = renderer.createPattern(image, "repeat-x");
let vertical   = renderer.createPattern(image, "repeat-y");
let basic      = renderer.createPattern(image, "no-repeat");
```
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:178

drawImage

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh): void
Draw an image onto the main using the canvas api
Parameters
- image:
      | OffscreenCanvas
      | ImageBitmap
      | VideoFrame
      | HTMLCanvasElement
      | HTMLImageElement
      | SVGImageElement
      | HTMLVideoElement
  An element to draw into the context.
- 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.
- dw: 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.
- dh: 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.
Returns void
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);
```
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:201

drawPattern

drawPattern(pattern, x, y, width, height): void
Draw a pattern within the given rectangle.
Parameters
- pattern: CanvasPattern
  Pattern object
- x: number
- y: number
- width: number
- height: number
Returns void
See
CanvasRenderer#createPattern
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:251

fill

fill(shape?): void
fill the given shape or the current defined path
Parameters
- Optionalshape: any
  a shape object to fill
Returns void
Overrides Renderer.fill
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:343

fillArc

fillArc(x, y, radius, start, end, antiClockwise?): void
Fill an arc at the specified coordinates with given radius, start and end points
Parameters
- 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
- OptionalantiClockwise: boolean
  draw arc anti-clockwise
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:387

fillEllipse

fillEllipse(x, y, w, h): void
Fill an ellipse at the specified coordinates with given radius
Parameters
- 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
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:437

fillLine

fillLine(startX, startY, endX, endY): void
Fill a line of the given two points
Parameters
- startX: number
  the start x coordinate
- startY: number
  the start y coordinate
- endX: number
  the end x coordinate
- endY: number
  the end y coordinate
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:469

fillPoint

fillPoint(x, y): void
Draw a a point at the specified coordinates
Parameters
- x: number
- y: number
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:589

fillPolygon

fillPolygon(poly): void
Fill the given me.Polygon on the screen
Parameters
- poly: Polygon
  the shape to draw
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:507

fillRect

fillRect(x, y, width, height): void
Draw a filled rectangle at the specified coordinates
Parameters
- x: number
- y: number
- width: number
- height: number
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:536

fillRoundRect

fillRoundRect(x, y, width, height, radius): void
Draw a rounded filled rectangle at the specified coordinates
Parameters
- x: number
- y: number
- width: number
- height: number
- radius: number
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:569

flush

flush(): void
render the main framebuffer on screen

Returns void
Inherited from Renderer.flush
- Defined in packages/melonjs/src/video/renderer.js:165

getBlendMode

getBlendMode(): string
returns the current blend mode for this renderer

Returns string
blend mode
Inherited from Renderer.getBlendMode
- Defined in packages/melonjs/src/video/renderer.js:203

getCanvas

getCanvas(): HTMLCanvasElement
return a reference to the current render target corresponding canvas which this renderer draws to

Returns HTMLCanvasElement
Inherited from Renderer.getCanvas
- Defined in packages/melonjs/src/video/renderer.js:187

getColor

getColor(): Color
get the current fill & stroke style color.

Returns Color
current global color
Inherited from Renderer.getColor
- Defined in packages/melonjs/src/video/renderer.js:211

getContext

getContext(): CanvasRenderingContext2D | WebGLRenderingContext
return a reference to the current render target corresponding Context

Returns CanvasRenderingContext2D | WebGLRenderingContext
Inherited from Renderer.getContext
- Defined in packages/melonjs/src/video/renderer.js:195

getGlobalAlpha

getGlobalAlpha(): number
Return the global alpha

Returns number
global alpha value
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:685

globalAlpha

globalAlpha(): number
return the current global alpha

Returns number
Inherited from Renderer.globalAlpha
- Defined in packages/melonjs/src/video/renderer.js:219

lineTo

lineTo(x, y): void
adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
Parameters
- x: any
- y: any
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:295

moveTo

moveTo(x, y): void
begins a new sub-path at the point specified by the given (x, y) coordinates.
Parameters
- x: number
  The x axis of the point.
- y: number
  The y axis of the point.
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:288

overlaps

overlaps(bounds): boolean
check if the given rect or bounds overlaps with the renderer screen coordinates
Parameters
- bounds: Bounds | Rect
Returns boolean
true if overlaps
Inherited from Renderer.overlaps
- Defined in packages/melonjs/src/video/renderer.js:228

rect

rect(x, y, width, height): void
creates a rectangular path whose starting point is at (x, y) and whose size is specified by width and height.
Parameters
- x: number
  The x axis of the coordinate for the rectangle starting point.
- y: number
  The y axis of the coordinate for the rectangle starting point.
- width: number
  The rectangle's width.
- height: number
  The rectangle's height.
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:306

reset

reset(): void
Reset context state

Returns void
Overrides Renderer.reset
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:77

resetTransform

resetTransform(): void
Reset the canvas transform to identity

Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:85

resize

resize(width, height): void
resizes the system canvas
Parameters
- width: number
  new width of the canvas
- height: number
  new height of the canvas
Returns void
Inherited from Renderer.resize
- Defined in packages/melonjs/src/video/renderer.js:242

restore

restore(): void

restores the most recently saved renderer state by popping the top entry in the drawing state stack

Returns void

Example

// Save the current state
renderer.save();

// apply a transform and draw a rect
renderer.tranform(matrix);
renderer.fillRect(10, 10, 100, 100);

// Restore to the state saved by the most recent call to save()
renderer.restore();

rotate

rotate(angle): void

adds a rotation to the transformation matrix.

Parameters

angle: number
the rotation angle, clockwise in radians

Returns void

Example

// Rotated rectangle
renderer.rotate((45 * Math.PI) / 180);
renderer.setColor("red");
renderer.fillRect(10, 10, 100, 100);

// Reset transformation matrix to the identity matrix
renderer.setTransform(1, 0, 0, 1, 0, 0);

roundRect

roundRect(x, y, width, height, radii): void
adds a rounded rectangle to the current path.
Parameters
- x: number
  The x axis of the coordinate for the rectangle starting point.
- y: number
  The y axis of the coordinate for the rectangle starting point.
- width: number
  The rectangle's width.
- height: number
  The rectangle's height.
- radii: any
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:318

save

save(): void

saves the entire state of the renderer by pushing the current state onto a stack.

Returns void

Example

// Save the current state
renderer.save();

// apply a transform and draw a rect
renderer.tranform(matrix);
renderer.fillRect(10, 10, 100, 100);

// Restore to the state saved by the most recent call to save()
renderer.restore();

scale

scale(x, y): void
adds a scaling transformation to the renderer units horizontally and/or vertically
Parameters
- x: number
  Scaling factor in the horizontal direction. A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.
- y: number
  Scaling factor in the vertical direction. A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:654

setAntiAlias

setAntiAlias(enable?): void
enable/disable image smoothing (scaling interpolation) for the current render target
Parameters
- Optionalenable: boolean = false
Returns void
Inherited from Renderer.setAntiAlias
- Defined in packages/melonjs/src/video/renderer.js:260

setBlendMode

setBlendMode(mode?, context?): void
set a blend mode for the given context.
Supported blend mode between Canvas and WebGL remderer :
- "normal" : this is the default mode and draws new content on top of the existing content
- "multiply" : the pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result.
- "additive or lighter" : where both content overlap the color is determined by adding color values.
- "screen" : The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply)
Parameters
- Optionalmode: string = "normal"
  blend mode : "normal", "multiply", "lighter, "additive", "screen"
- Optionalcontext: CanvasRenderingContext2D
Returns void
See
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:104

setColor

setColor(color): void
Set the current fill & stroke style color. By default, or upon reset, the value is set to #000000.
Parameters
- color: string | Color
  css color value
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:663

setGlobalAlpha

setGlobalAlpha(alpha): void
Set the global alpha
Parameters
- alpha: number
  0.0 to 1.0 values accepted.
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:677

setMask

setMask(mask?, invert?): void
A mask limits rendering elements to the shape and position of the given mask object. If the drawing or rendering area is larger than the mask, only the intersecting part of the renderable will be visible. (Note Mask are not preserved through renderer context save and restore and need so be manually cleared)
Parameters
- Optionalmask:
      | Polygon
      | Rect
      | Ellipse
      | Line
      | RoundRect
  the shape defining the mask to be applied
- Optionalinvert: boolean = false
  either the given shape should define what is visible (default) or the opposite
Returns void
See
CanvasRenderer#clearMask
Overrides Renderer.setMask
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:830

setProjection

setProjection(matrix): void
set/change the current projection matrix (WebGL only)
Parameters
- matrix: Matrix3d
Returns void
Inherited from Renderer.setProjection
- Defined in packages/melonjs/src/video/renderer.js:268

setTint

setTint(tint, alpha?): void
set a coloring tint for sprite based renderables
Parameters
- tint: Color
  the tint color
- Optionalalpha: number = tint.alpha
  an alpha value to be applied to the tint
Returns void
Inherited from Renderer.setTint
- Defined in packages/melonjs/src/video/renderer.js:383

setTransform

setTransform(a, b, c, d, e, f): void
Reset (overrides) the renderer transformation matrix to the identity one, and then apply the given transformation matrix.
Parameters
- a: number | Matrix2d
  a matrix2d to transform by, or a the a component to multiply the current matrix by
- b: number
  the b component to multiply the current matrix by
- c: number
  the c component to multiply the current matrix by
- d: number
  the d component to multiply the current matrix by
- e: number
  the e component to multiply the current matrix by
- f: number
  the f component to multiply the current matrix by
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:733

stroke

stroke(shape?, fill?): void
stroke the given shape or the current defined path
Parameters
- Optionalshape: any
  a shape object to stroke
- Optionalfill: boolean
  fill the shape with the current color if true
Returns void
Overrides Renderer.stroke
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:327

strokeArc

strokeArc(x, y, radius, start, end, antiClockwise?, fill?): void
Stroke an arc at the specified coordinates with given radius, start and end points
Parameters
- 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
- OptionalantiClockwise: boolean
  draw arc anti-clockwise
- Optionalfill: boolean = false
  also fill the shape with the current color if true
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:364

strokeEllipse

strokeEllipse(x, y, w, h, fill?): void
Stroke an ellipse at the specified coordinates with given radius
Parameters
- 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
- Optionalfill: boolean = false
  also fill the shape with the current color if true
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:399

strokeLine

strokeLine(startX, startY, endX, endY): void
Stroke a line of the given two points
Parameters
- startX: number
  the start x coordinate
- startY: number
  the start y coordinate
- endX: number
  the end x coordinate
- endY: number
  the end y coordinate
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:448

strokePoint

strokePoint(x, y): void
Stroke a Point at the specified coordinates
Parameters
- x: number
- y: number
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:578

strokePolygon

strokePolygon(poly, fill?): void
Stroke the given me.Polygon on the screen
Parameters
- poly: Polygon
  the shape to draw
- Optionalfill: boolean = false
  also fill the shape with the current color if true
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:478

strokeRect

strokeRect(x, y, width, height, fill?): void
Stroke a rectangle at the specified coordinates
Parameters
- x: number
- y: number
- width: number
- height: number
- Optionalfill: boolean = false
  also fill the shape with the current color if true
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:519

strokeRoundRect

strokeRoundRect(x, y, width, height, radius, fill?): void
Stroke a rounded rectangle at the specified coordinates
Parameters
- x: number
- y: number
- width: number
- height: number
- radius: number
- Optionalfill: boolean = false
  also fill the shape with the current color if true
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:549

tint

tint(src, color, mode?): OffscreenCanvas | HTMLCanvasElement
tint the given image or canvas using the given color
Parameters
- src: OffscreenCanvas | HTMLCanvasElement | HTMLImageElement
  the source image to be tinted
- color: string | Color
  the color that will be used to tint the image
- Optionalmode: string = "multiply"
  the composition mode used to tint the image
Returns OffscreenCanvas | HTMLCanvasElement
a new canvas or offscreencanvas (if supported) element representing the tinted image
Inherited from Renderer.tint
- Defined in packages/melonjs/src/video/renderer.js:338

toBlob

toBlob(type?, quality?): Promise<any>
creates a Blob object representing the last rendered frame
Parameters
- Optionaltype: string = "image/png"
  A string indicating the image format
- Optionalquality: number
  A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
Returns Promise<any>
A Promise returning a Blob object representing the last rendered frame
Example
```
renderer.convertToBlob().then((blob) => console.log(blob));
```
Inherited from Renderer.toBlob
- Defined in packages/melonjs/src/video/renderer.js:406

toDataURL

toDataURL(type?, quality?): Promise<any>
returns a data URL containing a representation of the last frame rendered
Parameters
- Optionaltype: string = "image/png"
  A string indicating the image format
- Optionalquality: number
  A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
Returns Promise<any>
A Promise returning a string containing the requested data URL.
Example
```
renderer.toDataURL().then((dataURL) => console.log(dataURL));
```
Inherited from Renderer.toDataURL
- Defined in packages/melonjs/src/video/renderer.js:431

toImageBitmap

toImageBitmap(type?, quality?): Promise<any>
creates an ImageBitmap object of the last frame rendered (not supported by standard Canvas)
Parameters
- Optionaltype: string = "image/png"
  A string indicating the image format
- Optionalquality: number
  A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.
Returns Promise<any>
A Promise returning an ImageBitmap.
Example
```
renderer.transferToImageBitmap().then((image) => console.log(image));
```
Inherited from Renderer.toImageBitmap
- Defined in packages/melonjs/src/video/renderer.js:419

transform

transform(a, b, c, d, e, f): void
Multiply given matrix into the renderer tranformation matrix
Parameters
- a: number | Matrix2d
  a matrix2d to transform by, or a the a component to multiply the current matrix by
- b: number
  the b component to multiply the current matrix by
- c: number
  the c component to multiply the current matrix by
- d: number
  the d component to multiply the current matrix by
- e: number
  the e component to multiply the current matrix by
- f: number
  the f component to multiply the current matrix by
Returns void
See
CanvasRenderer.setTransform which will reset the current transform matrix prior to performing the new transformation
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:748

translate

translate(x, y): void
adds a translation transformation to the current matrix.
Parameters
- x: number
  Distance to move in the horizontal direction. Positive values are to the right, and negative to the left.
- y: number
  Distance to move in the vertical direction. Positive values are down, and negative are up.
Returns void
- Defined in packages/melonjs/src/video/canvas/canvas_renderer.js:773

Class CanvasRenderer

Hierarchy (view full)

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns CanvasRenderer

Properties

backgroundColor

Default

cache

currentColor

currentTint

depthTest

Default

designRatio

isContextValid

Default

path2D

projectionMatrix

renderTarget

Name

scaleRatio

Default

settings

type

uvOffset

Accessors

height

Returns number

Parameters

Returns void

lineJoin

Returns string

Default

lineWidth

Returns number

Default

width

Returns number

Parameters

Returns void

Methods

beginPath

Returns void

Example

clear

Returns void

clearColor

Parameters

Returns void

clearMask

Returns void

See

clearRect

Parameters

Returns void

clearTint

Returns void

See

clipRect

Parameters

Returns void

closePath

Returns void

createPattern

Parameters

Returns CanvasPattern

See

Example

drawImage

Parameters

Returns void

Example

drawPattern

Parameters