Chartbreaker
    Preparing search index...

    Class CanvasRenderingContext2D

    Index

    Constructors

    Properties

    antialias: "default" | "none" | "gray" | "subpixel"

    Non-standard. Sets the antialiasing mode.

    canvas: Canvas
    currentTransform: DOMMatrix

    Returns or sets a DOMMatrix for the current transformation matrix.

    direction: "ltr" | "rtl"
    fillStyle: string | CanvasPattern | CanvasGradient
    font: string
    globalAlpha: number
    globalCompositeOperation: GlobalCompositeOperation
    imageSmoothingEnabled: boolean
    lang: string
    lineCap: CanvasLineCap
    lineDashOffset: number
    lineJoin: CanvasLineJoin
    lineWidth: number
    miterLimit: number
    patternQuality: "nearest" | "fast" | "good" | "best" | "bilinear"

    Non-standard. Defaults to 'good'. Affects pattern (gradient, image, etc.) rendering quality.

    quality: "nearest" | "fast" | "good" | "best" | "bilinear"

    Non-standard. Defaults to 'good'. Like patternQuality, but applies to transformations affecting more than just patterns.

    shadowBlur: number
    shadowColor: string
    shadowOffsetX: number
    shadowOffsetY: number
    strokeStyle: string | CanvasPattern | CanvasGradient
    textAlign: CanvasTextAlign
    textBaseline: CanvasTextBaseline
    textDrawingMode: "path" | "glyph"

    Defaults to 'path'. The effect depends on the canvas type:

    • Standard (image) 'glyph' and 'path' both result in rasterized text. Glyph mode is faster than path, but may result in lower-quality text, especially when rotated or translated.

    • PDF 'glyph' will embed text instead of paths into the PDF. This is faster to encode, faster to open with PDF viewers, yields a smaller file size and makes the text selectable. The subset of the font needed to render the glyphs will be embedded in the PDF. This is usually the mode you want to use with PDF canvases.

    • SVG glyph does not cause <text> elements to be produced as one might expect (cairo bug). Rather, glyph will create a <defs> section with a <symbol> for each glyph, then those glyphs be reused via <use> elements. 'path' mode creates a <path> element for each text string. glyph mode is faster and yields a smaller file size.

    In glyph mode, ctx.strokeText() and ctx.fillText() behave the same (aside from using the stroke and fill style, respectively).

    Methods

    • For PDF canvases, adds another page. If width and/or height are omitted, the canvas's initial size is used.

      Parameters

      • Optionalwidth: number
      • Optionalheight: number

      Returns void

    • Parameters

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

      Returns void

    • Parameters

      • x1: number
      • y1: number
      • x2: number
      • y2: number
      • radius: number

      Returns void

    • Returns void

    • Parameters

      • tagName: string
      • Optionalattributes: string

      Returns void

    • Parameters

      • cp1x: number
      • cp1y: number
      • cp2x: number
      • cp2y: number
      • x: number
      • y: number

      Returns void

    • Parameters

      • x: number
      • y: number
      • w: number
      • h: number

      Returns void

    • Returns void

    • Parameters

      • x0: number
      • y0: number
      • x1: number
      • y1: number

      Returns CanvasGradient

    • Parameters

      • image: Canvas | Image
      • repetition: null | "" | "repeat" | "repeat-x" | "repeat-y" | "no-repeat"

      Returns CanvasPattern

    • Parameters

      • x0: number
      • y0: number
      • r0: number
      • x1: number
      • y1: number
      • r1: number

      Returns CanvasGradient

    • Parameters

      Returns void

    • Parameters

      • image: Canvas | Image
      • dx: number
      • dy: number
      • dw: number
      • dh: number

      Returns void

    • Parameters

      • image: Canvas | Image
      • sx: number
      • sy: number
      • sw: number
      • sh: number
      • dx: number
      • dy: number
      • dw: number
      • dh: number

      Returns void

    • Parameters

      • x: number
      • y: number
      • radiusX: number
      • radiusY: number
      • rotation: number
      • startAngle: number
      • endAngle: number
      • Optionalcounterclockwise: boolean

      Returns void

    • Parameters

      • tagName: string

      Returns void

    • Parameters

      • x: number
      • y: number
      • w: number
      • h: number

      Returns void

    • Parameters

      • text: string
      • x: number
      • y: number
      • OptionalmaxWidth: number

      Returns void

    • Parameters

      • sx: number
      • sy: number
      • sw: number
      • sh: number

      Returns ImageData

    • Returns number[]

    • Parameters

      Returns boolean

    • Parameters

      • x: number
      • y: number

      Returns void

    • Parameters

      • x: number
      • y: number

      Returns void

    • Parameters

      Returns void

    • Parameters

      • imagedata: ImageData
      • dx: number
      • dy: number
      • dirtyX: number
      • dirtyY: number
      • dirtyWidth: number
      • dirtyHeight: number

      Returns void

    • Parameters

      • cpx: number
      • cpy: number
      • x: number
      • y: number

      Returns void

    • Parameters

      • x: number
      • y: number
      • w: number
      • h: number

      Returns void

    • Returns void

    • Returns void

    • Parameters

      • angle: number

      Returns void

    • Parameters

      • x: number
      • y: number
      • w: number
      • h: number
      • Optionalradii: number | number[]

      Returns void

    • Returns void

    • Parameters

      • x: number
      • y: number

      Returns void

    • Parameters

      • segments: number[]

      Returns void

    • Parameters

      Returns void

    • Parameters

      • a: number
      • b: number
      • c: number
      • d: number
      • e: number
      • f: number

      Returns void

    • Returns void

    • Parameters

      • x: number
      • y: number
      • w: number
      • h: number

      Returns void

    • Parameters

      • text: string
      • x: number
      • y: number
      • OptionalmaxWidth: number

      Returns void

    • Parameters

      • a: number
      • b: number
      • c: number
      • d: number
      • e: number
      • f: number

      Returns void

    • Parameters

      • x: number
      • y: number

      Returns void