Options
All
  • Public
  • Public/Protected
  • All
Menu

Class GraphicsContext

A thin caching wrapper around a 2D canvas rendering context.

Notes

This class is mostly a transparent wrapper around a canvas rendering context which improves performance when writing context state.

For best performance, avoid reading state from the gc. Writes are cached based on the previously written value.

Unless otherwise specified, the API and semantics of this class are identical to the builtin 2D canvas rendering context: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

The wrapped canvas context should not be manipulated externally until the wrapping GraphicsContext object is disposed.

Hierarchy

  • GraphicsContext

Implements

  • IDisposable

Index

Constructors

constructor

Properties

Private _context

_context: CanvasRenderingContext2D

Private _disposed

_disposed: boolean = false

Private _state

_state: State

Accessors

fillStyle

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

font

  • get font(): string
  • set font(value: string): void

globalAlpha

  • get globalAlpha(): number
  • set globalAlpha(value: number): void

globalCompositeOperation

  • get globalCompositeOperation(): string
  • set globalCompositeOperation(value: string): void

imageSmoothingEnabled

  • get imageSmoothingEnabled(): boolean
  • set imageSmoothingEnabled(value: boolean): void

isDisposed

  • get isDisposed(): boolean

lineCap

  • get lineCap(): CanvasLineCap
  • set lineCap(value: CanvasLineCap): void

lineDashOffset

  • get lineDashOffset(): number
  • set lineDashOffset(value: number): void

lineJoin

  • get lineJoin(): CanvasLineJoin
  • set lineJoin(value: CanvasLineJoin): void

lineWidth

  • get lineWidth(): number
  • set lineWidth(value: number): void

miterLimit

  • get miterLimit(): number
  • set miterLimit(value: number): void

shadowBlur

  • get shadowBlur(): number
  • set shadowBlur(value: number): void

shadowColor

  • get shadowColor(): string
  • set shadowColor(value: string): void

shadowOffsetX

  • get shadowOffsetX(): number
  • set shadowOffsetX(value: number): void

shadowOffsetY

  • get shadowOffsetY(): number
  • set shadowOffsetY(value: number): void

strokeStyle

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

textAlign

  • get textAlign(): CanvasTextAlign
  • set textAlign(value: CanvasTextAlign): void

textBaseline

  • get textBaseline(): CanvasTextBaseline
  • set textBaseline(value: CanvasTextBaseline): void

Methods

arc

  • arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: undefined | false | true): void
  • Parameters

    • x: number
    • y: number
    • radius: number
    • startAngle: number
    • endAngle: number
    • Optional anticlockwise: undefined | false | true

    Returns void

arcTo

  • arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void

beginPath

  • beginPath(): void

bezierCurveTo

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

clearRect

  • clearRect(x: number, y: number, w: number, h: number): void

clip

  • clip(fillRule?: CanvasFillRule): void

closePath

  • closePath(): void

createImageData

  • createImageData(imageData: ImageData): ImageData
  • createImageData(sw: number, sh: number): ImageData

createLinearGradient

  • createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradient

createPattern

  • createPattern(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement, repetition: string): CanvasPattern | null

createRadialGradient

  • createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradient

dispose

  • dispose(): void

drawFocusIfNeeded

  • drawFocusIfNeeded(element: Element): void

drawImage

  • drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, dstX: number, dstY: number): void
  • drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, dstX: number, dstY: number, dstW: number, dstH: number): void
  • drawImage(image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap, srcX: number, srcY: number, srcW: number, srcH: number, dstX: number, dstY: number, dstW: number, dstH: number): void
  • Parameters

    • image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap
    • dstX: number
    • dstY: number

    Returns void

  • Parameters

    • image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap
    • dstX: number
    • dstY: number
    • dstW: number
    • dstH: number

    Returns void

  • Parameters

    • image: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap
    • srcX: number
    • srcY: number
    • srcW: number
    • srcH: number
    • dstX: number
    • dstY: number
    • dstW: number
    • dstH: number

    Returns void

ellipse

  • ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: undefined | false | true): void
  • Parameters

    • x: number
    • y: number
    • radiusX: number
    • radiusY: number
    • rotation: number
    • startAngle: number
    • endAngle: number
    • Optional anticlockwise: undefined | false | true

    Returns void

fill

  • fill(fillRule?: CanvasFillRule): void

fillRect

  • fillRect(x: number, y: number, w: number, h: number): void

fillText

  • fillText(text: string, x: number, y: number, maxWidth?: undefined | number): void

getImageData

  • getImageData(sx: number, sy: number, sw: number, sh: number): ImageData

getLineDash

  • getLineDash(): number[]

isPointInPath

  • isPointInPath(x: number, y: number, fillRule?: CanvasFillRule): boolean

lineTo

  • lineTo(x: number, y: number): void

measureText

  • measureText(text: string): TextMetrics

moveTo

  • moveTo(x: number, y: number): void

putImageData

  • putImageData(imagedata: ImageData, dx: number, dy: number): void
  • putImageData(imagedata: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void

quadraticCurveTo

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

rect

  • rect(x: number, y: number, w: number, h: number): void

restore

  • restore(): void

rotate

  • rotate(angle: number): void

save

  • save(): void

scale

  • scale(x: number, y: number): void

setLineDash

  • setLineDash(segments: number[]): void

setTransform

  • setTransform(m11: number, m12: number, m21: number, m22: number, dx: number, dy: number): void

stroke

  • stroke(): void

strokeRect

  • strokeRect(x: number, y: number, w: number, h: number): void

strokeText

  • strokeText(text: string, x: number, y: number, maxWidth?: undefined | number): void

transform

  • transform(m11: number, m12: number, m21: number, m22: number, dx: number, dy: number): void

translate

  • translate(x: number, y: number): void

Generated using TypeDoc