Class CanvasRenderer

constructor

• new CanvasRenderer(options?): CanvasRenderer

• Parameters

  • Optionaloptions: any

    optional parameters for the renderer

  Returns CanvasRenderer

backgroundColor

black
Copy

cache

currentColor

currentTint

depthTest

"sorting"
Copy

designRatio

isContextValid

true
Copy

path2D

projectionMatrix

renderTarget

scaleRatio

<1,1>
Copy

settings

type

uvOffset

height

• get height(): number

• return the height of the canvas which this renderer draws to

  Returns number

  height of the system Canvas

• set height(value): void

• Parameters

  • value: number

  Returns void

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"
  Copy

lineWidth

• get lineWidth(): number

• sets or returns the thickness of lines for shape drawing

  Returns number

  Default

  1
  Copy

width

• get width(): number

• return the width of the canvas which this renderer draws to

  Returns number

  width of the system Canvas

• set width(value): void

• Parameters

  • value: number

  Returns void

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();
  Copy

clear

• clear(): void

• prepare the framebuffer for drawing a new frame

  Returns void

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

clearMask

• clearMask(): void

• disable (remove) the rendering mask set through setMask.

  Returns void

  See

  CanvasRenderer#setMask

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

clearTint

• clearTint(): void

• clear the rendering tint set through setTint.

  Returns void

  See

  Renderer#setTint

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

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

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

  lettileable = renderer.createPattern(image, "repeat");
  lethorizontal = renderer.createPattern(image, "repeat-x");
  letvertical = renderer.createPattern(image, "repeat-y");
  letbasic = renderer.createPattern(image, "no-repeat");
  Copy

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);
  Copy

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

fill

• fill(shape?): void

• fill the given shape or the current defined path

  Parameters

  • Optionalshape: any

    a shape object to fill

  Returns void

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

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

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

fillPoint

• fillPoint(x, y): void

• Draw a a point at the specified coordinates

  Parameters

  • x: number
  • y: number

  Returns void

fillPolygon

• fillPolygon(poly): void

• Fill the given me.Polygon on the screen

  Parameters

  • poly: Polygon

    the shape to draw

  Returns void

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

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

flush

• flush(): void

• render the main framebuffer on screen

  Returns void

getBlendMode

• getBlendMode(): string

• returns the current blend mode for this renderer

  Returns string

  blend mode

getCanvas

• getCanvas(): HTMLCanvasElement

• return a reference to the current render target corresponding canvas which this renderer draws to

  Returns HTMLCanvasElement

getColor

• getColor(): Color

• get the current fill & stroke style color.

  Returns Color

  current global color

getContext

• getContext(): CanvasRenderingContext2D | WebGLRenderingContext

• return a reference to the current render target corresponding Context

  Returns CanvasRenderingContext2D | WebGLRenderingContext

getGlobalAlpha

• getGlobalAlpha(): number

• Return the global alpha

  Returns number

  global alpha value

globalAlpha

• globalAlpha(): number

• return the current global alpha

  Returns number

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

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

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

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

reset

• reset(): void

• Reset context state

  Returns void

resetTransform

• resetTransform(): void

• Reset the canvas transform to identity

  Returns void

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

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();
  Copy

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);
  Copy

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

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();
  Copy

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

setAntiAlias

• setAntiAlias(enable?): void

• enable/disable image smoothing (scaling interpolation) for the current render target

  Parameters

  • Optionalenable: boolean = false

  Returns void

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

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

setGlobalAlpha

• setGlobalAlpha(alpha): void

• Set the global alpha

  Parameters

  • alpha: number

    0.0 to 1.0 values accepted.

  Returns void

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

setProjection

• setProjection(matrix): void

• set/change the current projection matrix (WebGL only)

  Parameters

  • matrix: Matrix3d

  Returns void

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

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

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

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

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

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

strokePoint

• strokePoint(x, y): void

• Stroke a Point at the specified coordinates

  Parameters

  • x: number
  • y: number

  Returns void

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

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

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

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

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));
  Copy

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));
  Copy

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));
  Copy

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

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