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

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

Properties

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: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D

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

textHeight: number = 0

Height of one line of text (in pixels).

Accessors

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

  • Parameters

    • style: string | CanvasGradient | CanvasPattern

    Returns void

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

  • Parameters

    • f: string

    Returns void

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

  • Parameters

    • style: string | CanvasGradient | CanvasPattern

    Returns void

  • get CANVAS_BROWSER_SIZE_LIMIT(): number
  • Returns number

  • get CATEGORY(): string
  • Returns string

  • get HEIGHT(): number
  • Returns number

  • get WIDTH(): number
  • Returns number

Methods

  • add(child: any): void
  • 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

  • bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): CanvasContext
  • clear(): void
  • Set all pixels to transparent black rgba(0,0,0,0).

    Returns void

  • 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(): void
  • fillRect(x: number, y: number, width: number, height: number): CanvasContext
  • getFont(): string
  • quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): CanvasContext
  • rect(x: number, y: number, width: number, height: number): CanvasContext
  • 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

  • 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

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