Options
All
  • Public
  • Public/Protected
  • All
Menu

Class CanvasContext

A rendering context for the Canvas backend. This class serves as a proxy for the underlying CanvasRenderingContext2D object, part of the browser's API.

Hierarchy

Index

Constructors

constructor

  • new CanvasContext(context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D): CanvasContext

Properties

canvas

canvas: HTMLCanvasElement | OffscreenCanvas | { height: number; width: number }

The HTMLCanvasElement or OffscreenCanvas that is associated with the above context. If there was no associated <canvas> element, just store the default WIDTH / HEIGHT.

context2D

context2D: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D

The 2D rendering context from the Canvas API. Forward method calls to this object.

textHeight

textHeight: number = 0

Height of one line of text (in pixels).

Accessors

fillStyle

  • get fillStyle(): string | CanvasGradient | CanvasPattern
  • set fillStyle(style: string | CanvasGradient | CanvasPattern): void
  • Returns string | CanvasGradient | CanvasPattern

  • Parameters

    • style: string | CanvasGradient | CanvasPattern

    Returns void

font

  • get font(): string
  • set font(f: string): void
  • Returns string

  • Parameters

    • f: string

    Returns void

strokeStyle

  • get strokeStyle(): string | CanvasGradient | CanvasPattern
  • set strokeStyle(style: string | CanvasGradient | CanvasPattern): void
  • Returns string | CanvasGradient | CanvasPattern

  • Parameters

    • style: string | CanvasGradient | CanvasPattern

    Returns void

Static CANVAS_BROWSER_SIZE_LIMIT

  • get CANVAS_BROWSER_SIZE_LIMIT(): number
  • Returns number

Static CATEGORY

  • get CATEGORY(): string
  • Returns string

Static HEIGHT

  • get HEIGHT(): number
  • Returns number

Static WIDTH

  • get WIDTH(): number
  • Returns number

Methods

add

  • add(child: any): void

arc

  • arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise: boolean): CanvasContext
  • Parameters

    • x: number
    • y: number
    • radius: number
    • startAngle: number
    • endAngle: number
    • counterclockwise: boolean

    Returns CanvasContext

beginPath

bezierCurveTo

  • bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): CanvasContext

clear

  • clear(): void
  • Set all pixels to transparent black rgba(0,0,0,0).

    Returns void

clearRect

  • clearRect(x: number, y: number, width: number, height: number): CanvasContext
  • Set the pixels in a rectangular area to transparent black rgba(0,0,0,0).

    Parameters

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

    Returns CanvasContext

closeGroup

  • closeGroup(): void

closePath

fill

fillRect

  • fillRect(x: number, y: number, width: number, height: number): CanvasContext

fillText

getFont

  • getFont(): string

lineTo

measureText

moveTo

openGroup

quadraticCurveTo

  • quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): CanvasContext

rect

  • rect(x: number, y: number, width: number, height: number): CanvasContext

resize

restore

save

scale

setBackgroundFillStyle

setFillStyle

setFont

  • setFont(f?: string | FontInfo, size?: string | number, weight?: string | number, style?: string): CanvasContext
  • Parameters

    • Optional f: string | FontInfo

      is 1) a FontInfo object or 2) a string formatted as CSS font shorthand (e.g., 'bold 10pt Arial') or 3) a string representing the font family (one of size, weight, or style must also be provided).

    • Optional size: string | number

      a string specifying the font size and unit (e.g., '16pt'), or a number (the unit is assumed to be 'pt').

    • Optional weight: string | number

      is a string (e.g., 'bold', 'normal') or a number (100, 200, ... 900).

    • Optional style: string

      is a string (e.g., 'italic', 'normal').

    Returns CanvasContext

setLineCap

setLineDash

setLineWidth

setRawFont

  • This is kept for backwards compatibility with 3.0.9.

    deprecated

    use setFont(...) instead since it now supports CSS font shorthand.

    Parameters

    • f: string

    Returns CanvasContext

setShadowBlur

setShadowColor

setStrokeStyle

stroke

Static sanitizeCanvasDims

  • sanitizeCanvasDims(width: number, height: number): [number, number]
  • Ensure that width and height do not exceed the browser limit.

    Parameters

    • width: number
    • height: number

    Returns [number, number]

    array of [width, height] clamped to the browser limit.