Optional
options: anyoptional parameters for the renderer
The background color used to clear the main framebuffer. Note: alpha value will be set based on the transparent property of the renderer settings.
the default method to sort object ("sorting", "z-buffer")
the requested video size ratio
true if the current rendering context is valid
The Path2D instance used by the renderer to draw primitives
The renderer renderTarget
the scaling ratio to be applied to the main canvas
The given constructor options
The renderer type : Canvas, WebGL, etc... (override this property with a specific value when implementing a custom renderer)
return the height of the canvas which this renderer draws to
height of the system Canvas
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"
sets or returns the thickness of lines for shape drawing
return the width of the canvas which this renderer draws to
width of the system Canvas
Clears the main framebuffer with the given color
Optional
color: string | Color = "#000000"CSS color.
Optional
opaque: boolean = falseAllow transparency [default] or clear the surface completely [true]
Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).
x axis of the coordinate for the rectangle starting point.
y axis of the coordinate for the rectangle starting point.
The rectangle's width.
The rectangle's 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 !)
Create a pattern with the specified repetition
Source image to be used as the pattern's image
Define how the pattern should be repeated
Draw an image onto the main using the canvas api
An element to draw into the context.
The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
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.
The height of the sub-rectangle of the source image to draw into the destination context.
The X coordinate in the destination canvas at which to place the top-left corner of the source image.
The Y coordinate in the destination canvas at which to place the top-left corner of the source image.
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.
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.
// 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);
Draw a pattern within the given rectangle.
Pattern object
Fill an arc at the specified coordinates with given radius, start and end points
arc center point x-axis
arc center point y-axis
start angle in radians
end angle in radians
Optional
antiClockwise: booleandraw arc anti-clockwise
Fill the given me.Polygon on the screen
the shape to draw
return a reference to the current render target corresponding canvas which this renderer draws to
return a reference to the current render target corresponding Context
creates a rectangular path whose starting point is at (x, y) and whose size is specified by width and height.
The x axis of the coordinate for the rectangle starting point.
The y axis of the coordinate for the rectangle starting point.
The rectangle's width.
The rectangle's height.
adds a rounded rectangle to the current path.
The x axis of the coordinate for the rectangle starting point.
The y axis of the coordinate for the rectangle starting point.
The rectangle's width.
The rectangle's height.
adds a scaling transformation to the renderer units horizontally and/or vertically
Scaling factor in the horizontal direction. A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.
Scaling factor in the vertical direction. A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling
set a blend mode for the given context.
Supported blend mode between Canvas and WebGL remderer :
Optional
mode: string = "normal"blend mode : "normal", "multiply", "lighter, "additive", "screen"
Optional
context: CanvasRenderingContext2DSet the current fill & stroke style color. By default, or upon reset, the value is set to #000000.
css color value
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)
set/change the current projection matrix (WebGL only)
set a coloring tint for sprite based renderables
the tint color
Optional
alpha: number = tint.alphaan alpha value to be applied to the tint
Reset (overrides) the renderer transformation matrix to the identity one, and then apply the given transformation matrix.
a matrix2d to transform by, or a the a component to multiply the current matrix by
the b component to multiply the current matrix by
the c component to multiply the current matrix by
the d component to multiply the current matrix by
the e component to multiply the current matrix by
the f component to multiply the current matrix by
Stroke an arc at the specified coordinates with given radius, start and end points
arc center point x-axis
arc center point y-axis
start angle in radians
end angle in radians
Optional
antiClockwise: booleandraw arc anti-clockwise
Optional
fill: boolean = falsealso fill the shape with the current color if true
Stroke an ellipse at the specified coordinates with given radius
ellipse center point x-axis
ellipse center point y-axis
horizontal radius of the ellipse
vertical radius of the ellipse
Optional
fill: boolean = falsealso fill the shape with the current color if true
Stroke the given me.Polygon on the screen
the shape to draw
Optional
fill: boolean = falsealso fill the shape with the current color if true
tint the given image or canvas using the given color
the source image to be tinted
the color that will be used to tint the image
Optional
mode: string = "multiply"the composition mode used to tint the image
a new canvas or offscreencanvas (if supported) element representing the tinted image
creates a Blob object representing the last rendered frame
Optional
type: string = "image/png"A string indicating the image format
Optional
quality: numberA 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.
A Promise returning a Blob object representing the last rendered frame
returns a data URL containing a representation of the last frame rendered
Optional
type: string = "image/png"A string indicating the image format
Optional
quality: numberA 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.
A Promise returning a string containing the requested data URL.
creates an ImageBitmap object of the last frame rendered (not supported by standard Canvas)
Optional
type: string = "image/png"A string indicating the image format
Optional
quality: numberA 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.
A Promise returning an ImageBitmap.
Multiply given matrix into the renderer tranformation matrix
a matrix2d to transform by, or a the a component to multiply the current matrix by
the b component to multiply the current matrix by
the c component to multiply the current matrix by
the d component to multiply the current matrix by
the e component to multiply the current matrix by
the f component to multiply the current matrix by
CanvasRenderer.setTransform which will reset the current transform matrix prior to performing the new transformation
adds a translation transformation to the current matrix.
Distance to move in the horizontal direction. Positive values are to the right, and negative to the left.
Distance to move in the vertical direction. Positive values are down, and negative are up.
a canvas renderer object