Class CanvasRenderer

a canvas renderer object

Hierarchy (view full)

Constructors

Properties

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.

black
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

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

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

  • 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

  • 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

  • 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

  • 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

    CanvasRenderer#clearMask

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

  • 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