graphics-ts/lib/Canvas.d.ts

A porting of purescript-{canvas, free-canvas, drawing} featuring fp-ts

/**
 * The `Canvas` module contains all the functions necessary to interact with the HTML
 * Canvas API. `graphics-ts` wraps all canvas operations in an `IO<A>` to allow for
 * chaining multiple effectful calls to the HTML Canvas API.
 *
 * For example, taking the example of [drawing a triangle](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) from the MDN Web Docs, the code
 * without `graphics-ts` looks like this.
 *
 * ```ts
 * const draw = () => {
 *   var canvas = document.getElementById('canvas')
 *
 *   if (canvas.getContext) {
 *     var ctx = canvas.getContext('2d')
 *
 *     ctx.beginPath();
 *     ctx.fillStyle = 'black'
 *     ctx.moveTo(75, 50)
 *     ctx.lineTo(100, 75)
 *     ctx.lineTo(100, 25)
 *     ctx.fill()
 *   }
 * }
 * ```
 *
 * With `graphics-ts`, the above code becomes
 *
 * ```ts
 * import { error } from 'fp-ts/lib/Console'
 * import { pipe } from 'fp-ts/lib/pipeable'
 * import * as R from 'fp-ts-contrib/lib/ReaderIO'
 * import * as C from 'graphics-ts/lib/Canvas'
 * import * as Color from 'graphics-ts/lib/Color'
 * import * as S from 'graphics-ts/lib/Shape'
 *
 * const canvasId = 'canvas'
 *
 * const triangle: C.Render<void> = C.fillPath(
 *   pipe(
 *     C.setFillStyle(pipe(Color.black, Color.toCss)),
 *     R.chain(() => C.moveTo(S.point(75, 50))),
 *     R.chain(() => C.lineTo(S.point(100, 75))),
 *     R.chain(() => C.lineTo(S.point(100, 25)))
 *   )
 * )
 *
 * C.renderTo(canvasId, () => error(`[ERROR]: Unable to find canvas with id ${canvasId}`))(triangle)()
 * ```
 *
 * While this may seem somewhat verbose compared to its non-functional counterpart above,
 * the real power of the `Canvas` module is apparent when it is abstracted away by the
 * `Drawing` module.
 *
 * Adapted from https://github.com/purescript-contrib/purescript-canvas.
 *
 * @since 1.0.0
 */
import * as R from 'fp-ts-contrib/lib/ReaderIO'
import * as IO from 'fp-ts/lib/IO'
import * as O from 'fp-ts/lib/Option'
import { Arc, Ellipse, Point, Rect } from './Shape'
/**
 * Represents the management of a `CanvasGradient` as *reading* from the `CanvasGradient` and
 * returning a type `A` wrapped in an `IO`. In other words, we can say that when we are managing
 * a `CanvasGradient` we are yielding an `Gradient` effect.
 *
 * @category model
 * @since 1.0.0
 */
export interface Gradient<A> extends R.ReaderIO<CanvasGradient, A> {}
/**
 * Represents the management of an `HTMLCanvasElement` as *reading* from the `HTMLCanvasElement`
 * and returning a type `A` wrapped in an `IO`. In other words, we can say that when we are
 * managing an `HTMLCanvasElement` we are yielding an `Html` effect.
 *
 * @category model
 * @since 1.0.0
 */
export interface Html<A> extends R.ReaderIO<HTMLCanvasElement, A> {}
/**
 * Represents the management of a `CanvasRenderingContext2D` as *reading* from the
 * `CanvasRenderingContext2D` and returning a type `A` wrapped in an `IO`. In other words, we can
 * say that when we are managing a `CanvasRenderingContext2D` we are yielding an `Render` effect.
 *
 * @category model
 * @since 1.0.0
 */
export interface Render<A> extends R.ReaderIO<CanvasRenderingContext2D, A> {}
/**
 * Represents the dimensions of the HTML canvas.
 *
 * @category model
 * @since 1.0.0
 */
export interface CanvasDimensions {
  /**
   * The width of the canvas in CSS pixels.
   */
  readonly width: number
  /**
   * The height of the canvas in CSS pixels.
   */
  readonly height: number
}
/**
 * The algorithm by which to determine if a point is inside or outside the filling region.
 *
 * @see [MDN Web Docs](https://mzl.la/2zaDdNu)
 *
 * @category model
 * @since 1.0.0
 */
export declare type FillRule = 'evenodd' | 'nonzero'
/**
 * The type of compositing operation to apply when drawing new shapes. Defaults to `source-over`.
 *
 * @see [MDN Web Docs](https://mzl.la/36gbsz7)
 *
 * @category model
 * @since 1.0.0
 */
export declare type GlobalCompositeOperation =
  | 'color'
  | 'color-burn'
  | 'color-dodge'
  | 'copy'
  | 'darken'
  | 'destination-atop'
  | 'destination-in'
  | 'destination-out'
  | 'destination-over'
  | 'difference'
  | 'exclusion'
  | 'hard-light'
  | 'hue'
  | 'lighten'
  | 'lighter'
  | 'luminosity'
  | 'multiply'
  | 'overlay'
  | 'saturation'
  | 'screen'
  | 'soft-light'
  | 'source-atop'
  | 'source-in'
  | 'source-out'
  | 'source-over'
  | 'xor'
/**
 * Represents an event handler that can be bound to an `HTMLCanvasElement`.
 *
 * @deprecated since 1.1.0
 * @category model
 * @since 1.0.0
 */
export declare type Handler<E extends Event> = (e: E) => void
/**
 * An element to draw into the HTML canvas context.
 *
 * @see [MDN Web Docs](https://mzl.la/3bKwLu6)
 *
 * @category model
 * @since 1.0.0
 */
export declare type ImageSource = HTMLCanvasElement | HTMLImageElement | HTMLVideoElement
/**
 * The shape used to draw the end points of lines.
 *
 * @see [MDN Web Docs](https://mzl.la/2zOVZtS)
 *
 * @category model
 * @since 1.0.0
 */
export declare type LineCap = 'butt' | 'round' | 'square'
/**
 * The shape used to draw two line segments where they meet.
 *
 * @see [MDN Web Docs](https://mzl.la/3cMHqFU)
 *
 * @category model
 * @since 1.0.0
 */
export declare type LineJoin = 'bevel' | 'miter' | 'round'
/**
 * The repetition pattern used to repeat a pattern's image.
 *
 * @see [MDN Web Docs](https://mzl.la/3bN4nHJ)
 *
 * @category model
 * @since 1.0.0
 */
export declare type PatternRepetition = 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y'
/**
 * The text alignment used when drawing text.
 *
 * @see [MDN Web Docs](https://mzl.la/2TkO2TY)
 *
 * @category model
 * @since 1.0.0
 */
export declare type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start'
/**
 * The text baseline used when drawing text.
 *
 * @see [MDN Web Docs](https://mzl.la/2XG6KH1)
 *
 * @category model
 * @since 1.0.0
 */
export declare type TextBaseline = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top'
/**
 * The dimensions of a piece of text in the canvas.
 *
 * @see [MDN Web Docs](https://mzl.la/3g0OCQG)
 *
 * @category model
 * @since 1.0.0
 */
export interface TextMetrics {
  /**
   * The distance from the alignment point given by the `text-align` property to the left side
   * of the bounding rectangle of the given text in CSS pixels.
   */
  readonly actualBoundingBoxLeft: number
  /**
   * The distance from the alignment point given by the `text-align` property to the right side
   * of the bounding rectangle of the given text in CSS pixels.
   */
  readonly actualBoundingBoxRight: number
  /**
   * The distance from the horizontal line indicated by the `text-baseline` attribute to the top
   * of the highest bounding rectangle of all the fonts used to render the text in CSS pixels.
   */
  readonly fontBoundingBoxAscent: number
  /**
   * The distance from the horizontal line indicated by the `text-baseline` attribute to the bottom
   * of the bounding rectangle of all the fonts used to render the text in CSS pixels.
   */
  readonly fontBoundingBoxDescent: number
  /**
   * The distance from the horizontal line indicated by the `text-baseline` attribute to the top
   * of the bounding rectangle used to render the text in CSS pixels.
   */
  readonly actualBoundingBoxAscent: number
  /**
   * The distance from the horizontal line indicated by the `text-baseline` attribute to the bottom
   * of the bounding rectangle used to render the text in CSS pixels.
   */
  readonly actualBoundingBoxDescent: number
  /**
   * The distance from the horizontal line indicated by the `text-baseline` property to the top
   * of the *em* square in the line box in CSS pixels.
   */
  readonly emHeightAscent: number
  /**
   * The distance from the horizontal line indicated by the `text-baseline` property to the bottom
   * of the *em* square in the line box, in CSS pixels.
   */
  readonly emHeightDescent: number
  /**
   * The horizontal line indicated by the `text-baseline` property to the hanging baseline of the
   * line box in CSS pixels.
   */
  readonly hangingBaseline: number
  /**
   * The distance from the horizontal line indicated by the `text-baseline` property to the alphabetic
   * baseline of the line box in CSS pixels.
   */
  readonly alphabeticBaseline: number
  /**
   * The distance from the horizontal line indicated by the `text-baseline` property to the ideographic
   * baseline of the line box in CSS pixels.
   */
  readonly ideographicBaseline: number
  /**
   * The calculated width of a segment of inline text in CSS pixels.
   */
  readonly width: number
}
/**
 * **[UNSAFE]** Gets a canvas element by id.
 *
 * @category constructors
 * @since 1.0.0
 */
export declare const unsafeGetCanvasElementById: (id: string) => HTMLCanvasElement
/**
 * **[UNSAFE]** Gets the 2D graphics context for a canvas element.
 *
 * @category constructors
 * @since 1.0.0
 */
export declare const unsafeGetContext2D: (canvas: HTMLCanvasElement) => CanvasRenderingContext2D
/**
 * Gets an canvas element by id, or `None` if the element does not exist or is not an
 * instance of `HTMLCanvasElement`.
 *
 * @category constructors
 * @since 1.0.0
 */
export declare const getCanvasElementById: (id: string) => IO.IO<O.Option<HTMLCanvasElement>>
/**
 * Gets the 2D graphics context for a canvas element.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const getContext2D: Html<CanvasRenderingContext2D>
/**
 * Gets the canvas width in pixels.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const getWidth: Html<number>
/**
 * Sets the width of the canvas in pixels.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setWidth: (width: number) => Html<HTMLCanvasElement>
/**
 * Gets the canvas height in pixels.
 *
 *  @category combinators
 * @since 1.0.0
 */
export declare const getHeight: Html<number>
/**
 * Sets the height of the canvas in pixels.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setHeight: (height: number) => Html<HTMLCanvasElement>
/**
 * Gets the dimensions of the canvas in pixels.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const getDimensions: Html<CanvasDimensions>
/**
 * Sets the dimensions of the canvas in pixels.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setDimensions: (dimensions: CanvasDimensions) => Html<HTMLCanvasElement>
/**
 * Create a data URL for the canvas.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const toDataURL: Html<string>
/**
 * Sets the current fill style for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setFillStyle: (style: string | CanvasGradient | CanvasPattern) => Render<CanvasRenderingContext2D>
/**
 * Gets the current font.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const getFont: Render<string>
/**
 * Sets the current font.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setFont: (font: string) => Render<CanvasRenderingContext2D>
/**
 * Sets the current global alpha for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setGlobalAlpha: (alpha: number) => Render<CanvasRenderingContext2D>
/**
 * Sets the current global composite operation type for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setGlobalCompositeOperation: (
  compositeOperation: GlobalCompositeOperation
) => Render<CanvasRenderingContext2D>
/**
 * Sets the current image smoothing property for the canvas context. Determines whether scaled images are smoothed
 * (`true`, default) or not (`false`).
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setImageSmoothingEnabled: (value: boolean) => Render<CanvasRenderingContext2D>
/**
 * Sets the current line cap type for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setLineCap: (cap: LineCap) => Render<CanvasRenderingContext2D>
/**
 * Sets the current line dash offset, or "phase", for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setLineDashOffset: (offset: number) => Render<CanvasRenderingContext2D>
/**
 * Sets the current line join type for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setLineJoin: (join: LineJoin) => Render<CanvasRenderingContext2D>
/**
 * Sets the current line width for the canvas context in pixels.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setLineWidth: (width: number) => Render<CanvasRenderingContext2D>
/**
 * Sets the current miter limit for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setMiterLimit: (limit: number) => Render<CanvasRenderingContext2D>
/**
 * Sets the current shadow blur radius for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setShadowBlur: (blur: number) => Render<CanvasRenderingContext2D>
/**
 * Sets the current shadow color for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setShadowColor: (color: string) => Render<CanvasRenderingContext2D>
/**
 * Sets the current shadow x-offset for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setShadowOffsetX: (offsetX: number) => Render<CanvasRenderingContext2D>
/**
 * Sets the current shadow y-offset for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setShadowOffsetY: (offsetY: number) => Render<CanvasRenderingContext2D>
/**
 * Sets the current stroke style for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setStrokeStyle: (style: string) => Render<CanvasRenderingContext2D>
/**
 * Gets the current text alignment.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const getTextAlign: Render<TextAlign>
/**
 * Sets the current text alignment.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setTextAlign: (textAlign: TextAlign) => Render<CanvasRenderingContext2D>
/**
 * Gets the current text baseline.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const getTextBaseline: Render<TextBaseline>
/**
 * Sets the current text baseline.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setTextBaseline: (textBaseline: TextBaseline) => Render<CanvasRenderingContext2D>
/**
 * Render an arc.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const arc: (arc: Arc) => Render<CanvasRenderingContext2D>
/**
 * Render an arc that is automatically connected to the path's latest point.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const arcTo: (
  x1: number,
  y1: number,
  x2: number,
  y2: number,
  radius: number
) => Render<CanvasRenderingContext2D>
/**
 * Begin a path on the canvas.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const beginPath: Render<CanvasRenderingContext2D>
/**
 * Draw a cubic Bézier curve.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const bezierCurveTo: (
  cpx1: number,
  cpy1: number,
  cpx2: number,
  cpy2: number,
  x: number,
  y: number
) => Render<CanvasRenderingContext2D>
/**
 * Set the pixels in the specified rectangle back to transparent black.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const clearRect: (rect: Rect) => Render<CanvasRenderingContext2D>
/**
 * Clip the current path on the canvas.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const clip: (fillRule?: FillRule, path?: Path2D) => Render<CanvasRenderingContext2D>
/**
 * Closes the current canvas path.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const closePath: Render<CanvasRenderingContext2D>
/**
 * Gets `ImageData` for the specified rectangle.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const createImageData: (sw: number, sh: number) => Render<ImageData>
/**
 * Creates a copy of an existing `ImageData` object.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const createImageDataCopy: (imageData: ImageData) => Render<ImageData>
/**
 * Creates a linear `CanvasGradient` object.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const createLinearGradient: (x0: number, y0: number, x1: number, y1: number) => Render<CanvasGradient>
/**
 * Creates a new canvas pattern (repeatable image).
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const createPattern: (
  imageSource: ImageSource,
  repetition: PatternRepetition
) => Render<O.Option<CanvasPattern>>
/**
 * Creates a radial `CanvasGradient` object.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const createRadialGradient: (
  x0: number,
  y0: number,
  r0: number,
  x1: number,
  y1: number,
  r1: number
) => Render<CanvasGradient>
/**
 * Draws a focus ring around the current or given path, if the specified element is focused.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const drawFocusIfNeeded: (element: HTMLElement, path?: Path2D) => Render<CanvasRenderingContext2D>
/**
 * Render an image.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const drawImage: (
  imageSource: ImageSource,
  offsetX: number,
  offsetY: number
) => Render<CanvasRenderingContext2D>
/**
 * Draws an image to the canvas.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const drawImageScale: (
  imageSource: ImageSource,
  offsetX: number,
  offsetY: number,
  width: number,
  height: number
) => Render<CanvasRenderingContext2D>
/**
 * Draws an image to the canvas.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const drawImageFull: (
  imageSource: ImageSource,
  offsetX: number,
  offsetY: number,
  width: number,
  height: number,
  canvasOffsetX: number,
  canvasOffsetY: number,
  canvasImageWidth: number,
  canvasImageHeight: number
) => Render<CanvasRenderingContext2D>
/**
 * Render an ellipse.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const ellipse: (ellipse: Ellipse) => Render<CanvasRenderingContext2D>
/**
 * Fill the current path on the canvas.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const fill: (fillRule?: FillRule, path?: Path2D) => Render<CanvasRenderingContext2D>
/**
 * Render a filled rectangle.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const fillRect: (rect: Rect) => Render<CanvasRenderingContext2D>
/**
 * Render filled text.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const fillText: (
  text: string,
  x: number,
  y: number,
  maxWidth?: number
) => Render<CanvasRenderingContext2D>
/**
 * Gets the image data for the specified portion of the canvas.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const getImageData: (rect: Rect) => Render<ImageData>
/**
 * Gets the current line dash pattern for the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const getLineDash: Render<ReadonlyArray<number>>
/**
 * Gets the current transformation matrix being applied to the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const getTransform: Render<DOMMatrix>
/**
 * Determines if the specified point is contained in the current path.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const isPointInPath: (point: Point, fillRule?: FillRule, path?: Path2D) => Render<boolean>
/**
 * Determines if the specified point is inside the area contained by the stroking of a path.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const isPointInStroke: (point: Point, path?: Path2D) => Render<boolean>
/**
 * Move the canvas path to the specified point while drawing a line segment.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const lineTo: (point: Point) => Render<CanvasRenderingContext2D>
/**
 * Get the text measurements for the specified text.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const measureText: (text: string) => Render<TextMetrics>
/**
 * Move the canvas path to the specified point without drawing a line segment.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const moveTo: (point: Point) => Render<CanvasRenderingContext2D>
/**
 * Sets the image data for the specified portion of the canvas.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const putImageData: (imageData: ImageData, dx: number, dy: number) => Render<CanvasRenderingContext2D>
/**
 * Sets the image data for the specified portion of the canvas.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const putImageDataFull: (
  imageData: ImageData,
  dx: number,
  dy: number,
  dirtyX: number,
  dirtyY: number,
  dirtyWidth: number,
  dirtyHeight: number
) => Render<CanvasRenderingContext2D>
/**
 * Draws a quadratic Bézier curve.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const quadraticCurveTo: (
  cpx: number,
  cpy: number,
  x: number,
  y: number
) => Render<CanvasRenderingContext2D>
/**
 * Render a rectangle.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const rect: (rect: Rect) => Render<CanvasRenderingContext2D>
/**
 * Restore the previous canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const restore: Render<CanvasRenderingContext2D>
/**
 * Apply rotation to the current canvas context transform.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const rotate: (angle: number) => Render<CanvasRenderingContext2D>
/**
 * Save the current canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const save: Render<CanvasRenderingContext2D>
/**
 * Apply scale to the current canvas context transform.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const scale: (scaleX: number, scaleY: number) => Render<CanvasRenderingContext2D>
/**
 * Sets the current line dash pattern used when stroking lines.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setLineDash: (segments: ReadonlyArray<number>) => Render<CanvasRenderingContext2D>
/**
 * Resets the current transformation to the identity matrix, and then applies the transform specified
 * to the current canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setTransform: (
  a: number,
  b: number,
  c: number,
  d: number,
  e: number,
  f: number
) => Render<CanvasRenderingContext2D>
/**
 * Resets the current transformation to the identity matrix, and then applies the transform specified
 * to the current canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const setTransformMatrix: (matrix: DOMMatrix) => Render<CanvasRenderingContext2D>
/**
 * Stroke the current path on the canvas.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const stroke: (path?: Path2D) => Render<CanvasRenderingContext2D>
/**
 * Render a stroked rectangle.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const strokeRect: (r: Rect) => Render<CanvasRenderingContext2D>
/**
 * Render stroked text.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const strokeText: (
  text: string,
  x: number,
  y: number,
  maxWidth?: number
) => Render<CanvasRenderingContext2D>
/**
 * Apply the specified transformation matrix to the canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const transform: (
  m11: number,
  m12: number,
  m21: number,
  m22: number,
  m31: number,
  m32: number
) => Render<CanvasRenderingContext2D>
/**
 * Translate the current canvas context transform.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const translate: (translateX: number, translateY: number) => Render<CanvasRenderingContext2D>
/**
 * Add a single color stop to a `CanvasGradient` object.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const addColorStop: (offset: number, color: string) => Gradient<CanvasGradient>
/**
 * Convenience function for drawing a filled path.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const fillPath: <A>(f: Render<A>) => Render<A>
/**
 * Convenience function for drawing a stroked path.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const strokePath: <A>(f: Render<A>) => Render<A>
/**
 * A convenience function which allows for running an action while preserving the existing
 * canvas context.
 *
 * @category combinators
 * @since 1.0.0
 */
export declare const withContext: <A>(f: Render<A>) => Render<A>
/**
 * Binds an event handler to the canvas element.
 *
 * @deprecated since 1.1.0
 * @category combinators
 * @since 1.0.0
 */
export declare const bind: <K extends keyof HTMLElementEventMap>(
  type: K,
  f: Handler<HTMLElementEventMap[K]>
) => Html<HTMLCanvasElement>
/**
 * Binds an event handler to the canvas element.
 *
 * @category combinators
 * @since 1.1.0
 */
export declare const bindWithContext: <
  K extends
    | 'waiting'
    | 'error'
    | 'abort'
    | 'cancel'
    | 'progress'
    | 'ended'
    | 'input'
    | 'select'
    | 'fullscreenchange'
    | 'fullscreenerror'
    | 'animationcancel'
    | 'animationend'
    | 'animationiteration'
    | 'animationstart'
    | 'auxclick'
    | 'blur'
    | 'canplay'
    | 'canplaythrough'
    | 'change'
    | 'click'
    | 'close'
    | 'contextmenu'
    | 'cuechange'
    | 'dblclick'
    | 'drag'
    | 'dragend'
    | 'dragenter'
    | 'dragexit'
    | 'dragleave'
    | 'dragover'
    | 'dragstart'
    | 'drop'
    | 'durationchange'
    | 'emptied'
    | 'focus'
    | 'focusin'
    | 'focusout'
    | 'gotpointercapture'
    | 'invalid'
    | 'keydown'
    | 'keypress'
    | 'keyup'
    | 'load'
    | 'loadeddata'
    | 'loadedmetadata'
    | 'loadstart'
    | 'lostpointercapture'
    | 'mousedown'
    | 'mouseenter'
    | 'mouseleave'
    | 'mousemove'
    | 'mouseout'
    | 'mouseover'
    | 'mouseup'
    | 'pause'
    | 'play'
    | 'playing'
    | 'pointercancel'
    | 'pointerdown'
    | 'pointerenter'
    | 'pointerleave'
    | 'pointermove'
    | 'pointerout'
    | 'pointerover'
    | 'pointerup'
    | 'ratechange'
    | 'reset'
    | 'resize'
    | 'scroll'
    | 'securitypolicyviolation'
    | 'seeked'
    | 'seeking'
    | 'selectionchange'
    | 'selectstart'
    | 'stalled'
    | 'submit'
    | 'suspend'
    | 'timeupdate'
    | 'toggle'
    | 'touchcancel'
    | 'touchend'
    | 'touchmove'
    | 'touchstart'
    | 'transitioncancel'
    | 'transitionend'
    | 'transitionrun'
    | 'transitionstart'
    | 'volumechange'
    | 'wheel'
    | 'copy'
    | 'cut'
    | 'paste',
  A
>(
  type: K,
  f: (e: HTMLElementEventMap[K]) => Render<A>
) => Render<CanvasRenderingContext2D>
/**
 * Executes a `Render` effect for a canvas with the specified `canvasId`, or `onCanvasNotFound()` if a canvas with
 * the specified `canvasId` does not exist.
 *
 * @since 1.0.0
 */
export declare const renderTo: (
  canvasId: string,
  onCanvasNotFound: () => IO.IO<void>
) => <A>(r: Render<A>) => IO.IO<void>