ICanvasRenderingContext | Babylon.js API documentation

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;
}

Properties

`Readonly`canvas

canvas: ICanvas

canvas is a read-only reference to ICanvas.

fillStyle

fillStyle: string | ICanvasGradient

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

filter

filter: string

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

font

font: string

Font setting. Default value 10px sans-serif.

globalAlpha

globalAlpha: number

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

lineJoin

lineJoin: string

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

lineWidth

lineWidth: number

Width of lines. Default 1.0.

miterLimit

miterLimit: number

Miter limit ratio. Default 10.

shadowBlur

shadowBlur: number

Specifies the blurring effect. Default: 0.

shadowColor

shadowColor: string

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

shadowOffsetX

shadowOffsetX: number

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

shadowOffsetY

shadowOffsetY: number

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

strokeStyle

strokeStyle: string | ICanvasGradient

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

Methods

arc

arc(
    x: number,
    y: number,
    radius: number,
    startAngle: number,
    endAngle: number,
    anticlockwise?: boolean,
): void
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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118022

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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118026

clearRect

clearRect(x: number, y: number, width: number, height: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:117952

clip

clip(): void
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only.

Returns void
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118005

closePath

closePath(): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118031

createLinearGradient

createLinearGradient(
    x0: number,
    y0: number,
    x1: number,
    y1: number,
): ICanvasGradient
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.
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118134

createRadialGradient

createRadialGradient(
    x0: number,
    y0: number,
    r0: number,
    x1: number,
    y1: number,
    r1: number,
): ICanvasGradient
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.
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118145

drawImage

drawImage(
    image: any,
    sx: number,
    sy: number,
    sWidth: number,
    sHeight: number,
    dx: number,
    dy: number,
    dWidth: number,
    dHeight: number,
): 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.
- 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118079
drawImage(
    image: any,
    dx: number,
    dy: number,
    dWidth: number,
    dHeight: number,
): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118088
drawImage(image: any, dx: number, dy: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118095

fill

fill(): void
Fills the current sub-paths with the current fill style.

Returns void
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118066

fillRect

fillRect(x: number, y: number, width: number, height: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:117968

fillText

fillText(text: string, x: number, y: number, maxWidth?: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118117

getImageData

getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
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.
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118104

getTransform

getTransform(): DOMMatrix
Retrieves the current transformation matrix being applied to the context.

Returns DOMMatrix
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118159

lineTo

lineTo(x: number, y: number): void
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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118043

measureText

measureText(text: string): ITextMetrics
Returns a TextMetrics object.
Parameters
- text: string
  The text String to measure.
Returns ITextMetrics
ITextMetrics A ITextMetrics object.
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118057

moveTo

moveTo(x: number, y: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118037

putImageData

putImageData(imageData: ImageData, dx: number, dy: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118012

quadraticCurveTo

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118051

rect

rect(x: number, y: number, width: number, height: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118001

restore

restore(): void
Restores the drawing style state to the last element on the 'state stack' saved by save().

Returns void
- Defined in .temp/typedoc/docdirectory/doc.d.ts:117960

rotate

rotate(angle: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:117979

save

save(): void
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().

Returns void
- Defined in .temp/typedoc/docdirectory/doc.d.ts:117956

scale

scale(x: number, y: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:117974

setLineDash

setLineDash(segments: number[]): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118109

setTransform

setTransform(
    a: number,
    b: number,
    c: number,
    d: number,
    e: number,
    f: number,
): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118155

stroke

stroke(path?: IPath2D): void
Strokes the current sub-paths with the current stroke style.
Parameters
- Optionalpath: IPath2D
  Optional Path2D.
Returns void
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118062

strokeRect

strokeRect(x: number, y: number, width: number, height: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:117993

strokeText

strokeText(text: string, x: number, y: number, maxWidth?: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:118125

translate

translate(x: number, y: number): 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
- Defined in .temp/typedoc/docdirectory/doc.d.ts:117985

Interface ICanvasRenderingContext

Index

Properties

Methods

Properties

Readonlycanvas

fillStyle

filter

font

globalAlpha

lineJoin

lineWidth

miterLimit

shadowBlur

shadowColor

shadowOffsetX

shadowOffsetY

strokeStyle

Methods

arc

Parameters

Returns void

beginPath

Returns void

clearRect

Parameters

Returns void

clip

Returns void

closePath

Returns void

createLinearGradient

Parameters

Returns ICanvasGradient

createRadialGradient

Parameters

Returns ICanvasGradient

drawImage

Parameters

Returns void

Parameters

Returns void

Parameters

Returns void

fill

Returns void

fillRect

Parameters

Returns void

fillText

Parameters

Returns void

getImageData

Parameters

Returns ImageData

getTransform

Returns DOMMatrix

lineTo

Parameters

Returns void

measureText

Parameters

Returns ITextMetrics

moveTo

Parameters

Returns void

putImageData

Parameters

Returns void

quadraticCurveTo

Parameters

Returns void

rect

Parameters

Returns void

restore

Returns void

rotate

Parameters

Returns void

`Readonly`canvas