Class UFCanvas

Support methods for canvas.

Methods

copyToClipboard createFromImage drawImage drawRoundRect drawTexture getAsJpegBase64 getAsPngBase64 toBlob

Methods

StaticcopyToClipboard

  • copyToClipboard(
        canvas: HTMLCanvasElement,
        imageType?: UFImageType,
    ): Promise<boolean>

    Copies the canvas to the clipboard.

    Parameters

    • canvas: HTMLCanvasElement

      Canvas to copy

    • imageType: UFImageType = UFImageType.Png

      Image type to copy to

    Returns Promise<boolean>

    True if the image was copied to the clipboard, false otherwise.

StaticcreateFromImage

  • createFromImage(
        image:
            | OffscreenCanvas
            | ImageBitmap
            | HTMLCanvasElement
            | HTMLImageElement
            | HTMLVideoElement,
        maxWidth?: number,
        maxHeight?: number,
        imageWidth?: number,
        imageHeight?: number,
    ): false | HTMLCanvasElement

    Creates a canvas from an image, scaling it down if necessary. If scaling occurs, the image is scaled while preserving the aspect ratio.

    Parameters

    • image:
          | OffscreenCanvas
          | ImageBitmap
          | HTMLCanvasElement
          | HTMLImageElement
          | HTMLVideoElement

      Image to copy

    • OptionalmaxWidth: number

      When set, limit the width of the created canvas

    • OptionalmaxHeight: number

      When set, limit the height of the created canvas

    • OptionalimageWidth: number

      When set, use this width instead of the image width

    • OptionalimageHeight: number

      When set, use this height instead of the image height

    Returns false | HTMLCanvasElement

    Created element or false if the canvas could not be created.

StaticdrawImage

  • drawImage(
        context: CanvasRenderingContext2D,
        image: HTMLImageElement,
        x: number,
        y: number,
        width: number,
        height: number,
        fit: UFFitType,
        horizontalPosition?: number,
        verticalPosition?: number,
    ): void

    Draws an image in an area in the canvas.

    Parameters

    • context: CanvasRenderingContext2D

      Context to draw in

    • image: HTMLImageElement

      Image to draw

    • x: number

      X position of area

    • y: number

      Y position of area

    • width: number

      Width of area

    • height: number

      Height of area

    • fit: UFFitType

      Determines how to fit the image within the area

    • horizontalPosition: number = 0.5

      Determines the relative horizontal position in case fit is either UFFitType.Contain or UFFitType.Cover.

    • OptionalverticalPosition: number

      Determines the relative vertical position in case fit is either UFFitType.Contain or UFFitType.Cover. When missing use the value of aHorizontalPosition.

    Returns void

StaticdrawRoundRect

  • drawRoundRect(
        context: CanvasRenderingContext2D,
        x: number,
        aY: number,
        width: number,
        height: number,
        radius?: number | UFBorderRadius,
        fill?: boolean,
        stroke?: boolean,
    ): void

    Draws a rounded rectangle using the current state of the canvas.

    Source: http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas

    Parameters

    • context: CanvasRenderingContext2D

      Context to draw rectangle in

    • x: number

      The top left x coordinate

    • aY: number

      The top left y coordinate

    • width: number

      The width of the rectangle

    • height: number

      The height of the rectangle

    • radius: number | UFBorderRadius = 5

      The corner radius.

    • fill: boolean = false

      Whether to fill the rectangle.

    • stroke: boolean = true

      Whether to draw a stroke with the rectangle.

    Returns void

StaticdrawTexture

StaticgetAsJpegBase64

  • getAsJpegBase64(canvas: HTMLCanvasElement, quality?: number): string

    Gets the contents of a canvas as base64 encoded jpeg image.

    Parameters

    • canvas: HTMLCanvasElement
    • quality: number = 0.85

      A value between 0 (0%) and 1 (100%)

    Returns string

    Base 64 encoded string

StaticgetAsPngBase64

  • getAsPngBase64(canvas: HTMLCanvasElement): string

    Gets the contents of a canvas as base64 encoded png image.

    Parameters

    • canvas: HTMLCanvasElement

    Returns string

    Base 64 encoded string

StatictoBlob

  • toBlob(canvas: HTMLCanvasElement, imageType?: UFImageType): Promise<null | Blob>

    Creates a blob from a canvas.

    Parameters

    • canvas: HTMLCanvasElement

      Canvas to create blob from

    • imageType: UFImageType = UFImageType.Png

      Image type to convert canvas to

    Returns Promise<null | Blob>

    Blob or null if the blob could not be created.

Settings

Member Visibility

On This Page

Methods