API
Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface ICanvasRenderingContext

Class used to abstract canvas rendering

Hierarchy

  • ICanvasRenderingContext

Index

Properties

Methods

Properties

Readonly canvasSearch playground for canvas

canvas: ICanvas

canvas is a read-only reference to ICanvas.

fillStyleSearch playground for fillStyle

fillStyle: string | ICanvasGradient

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

fontSearch playground for font

font: string

Font setting. Default value 10px sans-serif.

globalAlphaSearch playground for globalAlpha

globalAlpha: number

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

lineJoinSearch playground for lineJoin

lineJoin: string

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

lineWidthSearch playground for lineWidth

lineWidth: number

Width of lines. Default 1.0.

miterLimitSearch playground for miterLimit

miterLimit: number

Miter limit ratio. Default 10.

shadowBlurSearch playground for shadowBlur

shadowBlur: number

Specifies the blurring effect. Default: 0.

shadowColorSearch playground for shadowColor

shadowColor: string

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

shadowOffsetXSearch playground for shadowOffsetX

shadowOffsetX: number

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

shadowOffsetYSearch playground for shadowOffsetY

shadowOffsetY: number

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

strokeStyleSearch playground for strokeStyle

strokeStyle: string

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

Methods

arcSearch playground for 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.

    • Optional anticlockwise: boolean

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

    Returns void

beginPathSearch playground for 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

clearRectSearch playground for 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

clipSearch playground for 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

closePathSearch playground for 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

createLinearGradientSearch playground for 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.

drawImageSearch playground for drawImage

  • 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

  • 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

fillSearch playground for fill

  • fill(): void

  • Fills the current sub-paths with the current fill style.

    Returns void

fillRectSearch playground for 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

fillTextSearch playground for 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.

    • Optional maxWidth: 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

getImageDataSearch playground for 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.

lineToSearch playground for 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

measureTextSearch playground for measureText

  • Returns a TextMetrics object.

    Parameters

    • text: string

      The text String to measure.

    Returns ITextMetrics

    ITextMetrics A ITextMetrics object.

moveToSearch playground for 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

putImageDataSearch playground for 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

quadraticCurveToSearch playground for 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

rectSearch playground for 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

restoreSearch playground for restore

  • restore(): void

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

    Returns void

rotateSearch playground for 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

saveSearch playground for 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

scaleSearch playground for 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

setLineDashSearch playground for setLineDash

  • setLineDash(segments: Array<number>): void

  • Sets the current line dash pattern.

    Parameters

    • segments: Array<number>

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

    Returns void

setTransformSearch playground for 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

strokeSearch playground for stroke

  • stroke(): void

  • Strokes the current sub-paths with the current stroke style.

    Returns void

strokeRectSearch playground for 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

strokeTextSearch playground for 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.

    • Optional maxWidth: 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

translateSearch playground for 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

Legend

  • Constructor
  • Property
  • Method
  • Property
  • Method
  • Inherited property
  • Inherited method
  • Static property
  • Static method