Class CanvasRenderer

a canvas renderer object

Hierarchy (view full)

Constructors

Properties

cache: TextureCache
currentColor: Color
currentTint: Color
depthTest: string

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

"sorting"
designRatio: number

the requested video size ratio

isContextValid: boolean

true if the current rendering context is valid

true
path2D: Path2D

The Path2D instance used by the renderer to draw primitives

projectionMatrix: Matrix3d
renderTarget: CanvasRenderTarget

The renderer renderTarget

renderTarget

scaleRatio: Vector2d

the scaling ratio to be applied to the main canvas

<1,1>
settings: object

The given constructor options

type: string

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

uvOffset: number

Accessors

  • 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

  • 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

    "miter"
    
  • 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

Methods

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

    Returns void

    // 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();
  • 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

  • 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

  • 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

  • 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

  • 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

    ImageLayer#repeat

    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");
  • 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

    // 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.

    Parameters

    • pattern: CanvasPattern

      Pattern object

    • x: number
    • y: number
    • width: number
    • height: number

    Returns void

    CanvasRenderer#createPattern

  • 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

  • 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

  • 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

  • Draw a filled rectangle at the specified coordinates

    Parameters

    • x: number
    • y: number
    • width: number
    • height: number

    Returns void

  • Draw a rounded filled rectangle at the specified coordinates

    Parameters

    • x: number
    • y: number
    • width: number
    • height: number
    • radius: number

    Returns void

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

    Returns HTMLCanvasElement

  • return a reference to the current render target corresponding Context

    Returns CanvasRenderingContext2D | WebGLRenderingContext

  • 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

  • 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

  • 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

  • resizes the system canvas

    Parameters

    • width: number

      new width of the canvas

    • height: number

      new height of the canvas

    Returns void

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

    Returns void

    // 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();
  • adds a rotation to the transformation matrix.

    Parameters

    • angle: number

      the rotation angle, clockwise in radians

    Returns void

    // 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);
  • 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

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

    Returns void

    // 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();
  • 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

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

    Parameters

    • Optionalenable: boolean = false

    Returns 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

  • 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

  • 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:
          | Rect
          | Polygon
          | Line
          | Ellipse
          | 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

    CanvasRenderer#clearMask

  • 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

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

  • 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

  • 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

  • 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

  • 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

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

  • 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

    renderer.convertToBlob().then((blob) => console.log(blob));
    
  • 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.

    renderer.toDataURL().then((dataURL) => console.log(dataURL));
    
  • 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.

    renderer.transferToImageBitmap().then((image) => console.log(image));
    
  • 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

    CanvasRenderer.setTransform which will reset the current transform matrix prior to performing the new transformation

  • 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