API
API|
@babylonjs/core|
ICanvasRenderingContext

Interface ICanvasRenderingContext

Class used to abstract canvas rendering

interface ICanvasRenderingContext {
    canvas: ICanvas;
    fillStyle: string | ICanvasGradient;
    filter: string;
    font: string;
    globalAlpha: number;
    lineJoin: string;
    lineWidth: number;
    miterLimit: number;
    shadowBlur: number;
    shadowColor: string;
    shadowOffsetX: number;
    shadowOffsetY: number;
    strokeStyle: string | ICanvasGradient;
    arc(
        x: number,
        y: number,
        radius: number,
        startAngle: number,
        endAngle: number,
        anticlockwise?: boolean,
    ): void;
    beginPath(): void;
    clearRect(x: number, y: number, width: number, height: number): void;
    clip(): void;
    closePath(): void;
    createLinearGradient(
        x0: number,
        y0: number,
        x1: number,
        y1: number,
    ): ICanvasGradient;
    createRadialGradient(
        x0: number,
        y0: number,
        r0: number,
        x1: number,
        y1: number,
        r1: number,
    ): ICanvasGradient;
    drawImage(
        image: any,
        sx: number,
        sy: number,
        sWidth: number,
        sHeight: number,
        dx: number,
        dy: number,
        dWidth: number,
        dHeight: number,
    ): void;
    drawImage(
        image: any,
        dx: number,
        dy: number,
        dWidth: number,
        dHeight: number,
    ): void;
    drawImage(image: any, dx: number, dy: number): void;
    fill(): void;
    fillRect(x: number, y: number, width: number, height: number): void;
    fillText(text: string, x: number, y: number, maxWidth?: number): void;
    getImageData(sx: number, sy: number, sw: number, sh: number): ImageData;
    getTransform(): DOMMatrix;
    lineTo(x: number, y: number): void;
    measureText(text: string): ITextMetrics;
    moveTo(x: number, y: number): void;
    putImageData(imageData: ImageData, dx: number, dy: number): void;
    quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void;
    rect(x: number, y: number, width: number, height: number): void;
    restore(): void;
    rotate(angle: number): void;
    save(): void;
    scale(x: number, y: number): void;
    setLineDash(segments: number[]): void;
    setTransform(
        a: number,
        b: number,
        c: number,
        d: number,
        e: number,
        f: number,
    ): void;
    stroke(path?: IPath2D): void;
    strokeRect(x: number, y: number, width: number, height: number): void;
    strokeText(text: string, x: number, y: number, maxWidth?: number): void;
    translate(x: number, y: number): void;
}
Index
canvas fillStyle filter font globalAlpha lineJoin lineWidth miterLimit shadowBlur shadowColor shadowOffsetX shadowOffsetY strokeStyle
arc beginPath clearRect clip closePath createLinearGradient createRadialGradient drawImage fill fillRect fillText getImageData getTransform lineTo measureText moveTo putImageData quadraticCurveTo rect restore rotate save scale setLineDash setTransform stroke strokeRect strokeText translate
canvas: ICanvas

canvas is a read-only reference to ICanvas.

fillStyle: string | ICanvasGradient

Color or style to use inside shapes. Default #000 (black).

filter: string

Provides filter effects such as blurring and grayscaling. It is similar to the CSS filter property and accepts the same values.

font: string

Font setting. Default value 10px sans-serif.

globalAlpha: number

Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).

lineJoin: string

Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default).

lineWidth: number

Width of lines. Default 1.0.

miterLimit: number

Miter limit ratio. Default 10.

shadowBlur: number

Specifies the blurring effect. Default: 0.

shadowColor: string

Color of the shadow. Default: fully-transparent black.

shadowOffsetX: number

Horizontal distance the shadow will be offset. Default: 0.

shadowOffsetY: number

Vertical distance the shadow will be offset. Default: 0.

strokeStyle: string | ICanvasGradient

Color or style to use for the lines around shapes. Default #000 (black).

  • Adds a circular arc to the current path.

    Parameters

    • x: number

      The horizontal coordinate of the arc's center.

    • y: number

      The vertical coordinate of the arc's center.

    • radius: number

      The arc's radius. Must be positive.

    • startAngle: number

      The angle at which the arc starts in radians, measured from the positive x-axis.

    • endAngle: number

      The angle at which the arc ends in radians, measured from the positive x-axis.

    • Optionalanticlockwise: boolean

      An optional Boolean. If true, draws the arc counter-clockwise between the start and end angles. The default is false (clockwise).

    Returns void

  • Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.

    Parameters

    • x: number

      The x-axis coordinate of the rectangle's starting point.

    • y: number

      The y-axis coordinate of the rectangle's starting point.

    • width: number

      The rectangle's width. Positive values are to the right, and negative to the left.

    • height: number

      The rectangle's height. Positive values are down, and negative are up.

    Returns void

  • Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.

    Returns void

  • Creates a linear gradient along the line given by the coordinates represented by the parameters.

    Parameters

    • x0: number

      The x-axis coordinate of the start point.

    • y0: number

      The y-axis coordinate of the start point.

    • x1: number

      The x-axis coordinate of the end point.

    • y1: number

      The y-axis coordinate of the end point.

    Returns ICanvasGradient

    ICanvasGradient A linear ICanvasGradient initialized with the specified line.

  • Creates a linear gradient along the line given by the coordinates represented by the parameters.

    Parameters

    • x0: number

      The x-axis coordinate of the start circle.

    • y0: number

      The y-axis coordinate of the start circle.

    • r0: number

      The radius of the start circle. Must be non-negative and finite.

    • x1: number

      The x-axis coordinate of the end point.

    • y1: number

      The y-axis coordinate of the end point.

    • r1: number

      The radius of the end circle. Must be non-negative and finite.

    Returns ICanvasGradient

    ICanvasGradient A linear ICanvasGradient initialized with the two specified circles.

  • Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

    Parameters

    • image: any

      An element to draw into the context.

    • sx: number

      The x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

    • sy: number

      The y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

    • sWidth: 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.

    • sHeight: number

      The height of the sub-rectangle of the source image to draw into the destination context.

    • dx: number

      The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

    • dy: number

      The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

    • dWidth: 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.

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

  • Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

    Parameters

    • image: any

      An element to draw into the context.

    • dx: number

      The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

    • dy: number

      The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

    • dWidth: 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.

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

  • Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

    Parameters

    • image: any

      An element to draw into the context.

    • dx: number

      The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

    • dy: number

      The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.

    Returns void

  • Draws a filled rectangle at (x, y) position whose size is determined by width and height.

    Parameters

    • x: number

      The x-axis coordinate of the rectangle's starting point.

    • y: number

      The y-axis coordinate of the rectangle's starting point.

    • width: number

      The rectangle's width. Positive values are to the right, and negative to the left.

    • height: number

      The rectangle's height. Positive values are down, and negative are up.

    Returns void

  • Draws (fills) a given text at the given (x, y) position.

    Parameters

    • text: string

      A String specifying the text string to render into the context. The text is rendered using the settings specified by font, textAlign, textBaseline, and direction.

    • x: number

      The x-axis coordinate of the point at which to begin drawing the text, in pixels.

    • y: number

      The y-axis coordinate of the baseline on which to begin drawing the text, in pixels.

    • OptionalmaxWidth: number

      The maximum number of pixels wide the text may be once rendered. If not specified, there is no limit to the width of the text.

    Returns void

  • Returns an ImageData object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.

    Parameters

    • sx: number

      The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.

    • sy: number

      The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.

    • sw: number

      The width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left.

    • sh: number

      The height of the rectangle from which the ImageData will be extracted. Positive values are down, and negative are up.

    Returns ImageData

    ImageData An ImageData object containing the image data for the rectangle of the canvas specified.

  • Connects the last point in the current sub-path to the specified (x, y) coordinates with a straight line.

    Parameters

    • x: number

      The x-axis coordinate of the line's end point.

    • y: number

      The y-axis coordinate of the line's end point.

    Returns void

  • Moves the starting point of a new sub-path to the (x, y) coordinates.

    Parameters

    • x: number

      The x-axis (horizontal) coordinate of the point.

    • y: number

      The y-axis (vertical) coordinate of the point.

    Returns void

  • Paints data from the given ImageData object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.

    Parameters

    • imageData: ImageData

      An ImageData object containing the array of pixel values.

    • dx: number

      Horizontal position (x coordinate) at which to place the image data in the destination canvas.

    • dy: number

      Vertical position (y coordinate) at which to place the image data in the destination canvas.

    Returns void

  • Adds a quadratic Bézier curve to the current path.

    Parameters

    • cpx: number

      The x-axis coordinate of the control point.

    • cpy: number

      The y-axis coordinate of the control point.

    • x: number

      The x-axis coordinate of the end point.

    • y: number

      The y-axis coordinate of the end point.

    Returns void

  • Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.

    Parameters

    • x: number

      The x-axis coordinate of the rectangle's starting point.

    • y: number

      The y-axis coordinate of the rectangle's starting point.

    • width: number

      The rectangle's width. Positive values are to the right, and negative to the left.

    • height: number

      The rectangle's height. Positive values are down, and negative are up.

    Returns void

  • Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.

    Parameters

    • angle: number

      The rotation angle, clockwise in radians. You can use degree * Math.PI / 180 to calculate a radian from a degree.

    Returns void

  • Adds a scaling transformation to the canvas units by x horizontally and by y 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

  • Sets the current line dash pattern.

    Parameters

    • segments: number[]

      An Array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units).

    Returns void

  • Resets the current transform to matrix composed with a, b, c, d, e, f.

    Parameters

    • a: number

      Horizontal scaling. A value of 1 results in no scaling.

    • b: number

      Vertical skewing.

    • c: number

      Horizontal skewing.

    • d: number

      Vertical scaling. A value of 1 results in no scaling.

    • e: number

      Horizontal translation (moving).

    • f: number

      Vertical translation (moving).

    Returns void

  • Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.

    Parameters

    • x: number

      The x-axis coordinate of the rectangle's starting point.

    • y: number

      The y-axis coordinate of the rectangle's starting point.

    • width: number

      The rectangle's width. Positive values are to the right, and negative to the left.

    • height: number

      The rectangle's height. Positive values are down, and negative are up.

    Returns void

  • Draws (strokes) a given text at the given (x, y) position.

    Parameters

    • text: string

      A String specifying the text string to render into the context. The text is rendered using the settings specified by font, textAlign, textBaseline, and direction.

    • x: number

      The x-axis coordinate of the point at which to begin drawing the text, in pixels.

    • y: number

      The y-axis coordinate of the baseline on which to begin drawing the text, in pixels.

    • OptionalmaxWidth: number

      The maximum number of pixels wide the text may be once rendered. If not specified, there is no limit to the width of the text.

    Returns void

  • Adds a translation transformation by moving the canvas and its origin x horizontally and y vertically on the grid.

    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