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()
  }
}

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)()

export declare const addColorStop: (offset: number, color: string) => Gradient<CanvasGradient>

export declare const arc: (arc: Arc) => Render<CanvasRenderingContext2D>

export declare const arcTo: (
  x1: number,
  y1: number,
  x2: number,
  y2: number,
  radius: number
) => Render<CanvasRenderingContext2D>

export declare const beginPath: Render<CanvasRenderingContext2D>

export declare const bezierCurveTo: (
  cpx1: number,
  cpy1: number,
  cpx2: number,
  cpy2: number,
  x: number,
  y: number
) => Render<CanvasRenderingContext2D>

export declare const bindWithContext: <
  K extends
    | 'copy'
    | 'fullscreenchange'
    | 'fullscreenerror'
    | 'abort'
    | 'animationcancel'
    | 'animationend'
    | 'animationiteration'
    | 'animationstart'
    | 'auxclick'
    | 'blur'
    | 'cancel'
    | 'canplay'
    | 'canplaythrough'
    | 'change'
    | 'click'
    | 'close'
    | 'contextmenu'
    | 'cuechange'
    | 'dblclick'
    | 'drag'
    | 'dragend'
    | 'dragenter'
    | 'dragexit'
    | 'dragleave'
    | 'dragover'
    | 'dragstart'
    | 'drop'
    | 'durationchange'
    | 'emptied'
    | 'ended'
    | 'error'
    | 'focus'
    | 'focusin'
    | 'focusout'
    | 'gotpointercapture'
    | 'input'
    | 'invalid'
    | 'keydown'
    | 'keypress'
    | 'keyup'
    | 'load'
    | 'loadeddata'
    | 'loadedmetadata'
    | 'loadend'
    | 'loadstart'
    | 'lostpointercapture'
    | 'mousedown'
    | 'mouseenter'
    | 'mouseleave'
    | 'mousemove'
    | 'mouseout'
    | 'mouseover'
    | 'mouseup'
    | 'pause'
    | 'play'
    | 'playing'
    | 'pointercancel'
    | 'pointerdown'
    | 'pointerenter'
    | 'pointerleave'
    | 'pointermove'
    | 'pointerout'
    | 'pointerover'
    | 'pointerup'
    | 'progress'
    | 'ratechange'
    | 'reset'
    | 'resize'
    | 'scroll'
    | 'securitypolicyviolation'
    | 'seeked'
    | 'seeking'
    | 'select'
    | 'selectionchange'
    | 'selectstart'
    | 'stalled'
    | 'submit'
    | 'suspend'
    | 'timeupdate'
    | 'toggle'
    | 'touchcancel'
    | 'touchend'
    | 'touchmove'
    | 'touchstart'
    | 'transitioncancel'
    | 'transitionend'
    | 'transitionrun'
    | 'transitionstart'
    | 'volumechange'
    | 'waiting'
    | 'wheel'
    | 'cut'
    | 'paste',
  A
>(
  type: K,
  f: (e: HTMLElementEventMap[K]) => Render<A>
) => Render<CanvasRenderingContext2D>

export declare const clearRect: (rect: Rect) => Render<CanvasRenderingContext2D>

export declare const clip: (fillRule?: FillRule, path?: Path2D) => Render<CanvasRenderingContext2D>

export declare const closePath: Render<CanvasRenderingContext2D>

export declare const createImageData: (sw: number, sh: number) => Render<ImageData>

export declare const createImageDataCopy: (imageData: ImageData) => Render<ImageData>

export declare const createLinearGradient: (x0: number, y0: number, x1: number, y1: number) => Render<CanvasGradient>

export declare const createPattern: (
  imageSource: ImageSource,
  repetition: PatternRepetition
) => Render<O.Option<CanvasPattern>>

export declare const createRadialGradient: (
  x0: number,
  y0: number,
  r0: number,
  x1: number,
  y1: number,
  r1: number
) => Render<CanvasGradient>

export declare const drawFocusIfNeeded: (element: HTMLElement, path?: Path2D) => Render<CanvasRenderingContext2D>

export declare const drawImage: (
  imageSource: ImageSource,
  offsetX: number,
  offsetY: number
) => Render<CanvasRenderingContext2D>

export declare const drawImageFull: (
  imageSource: ImageSource,
  offsetX: number,
  offsetY: number,
  width: number,
  height: number,
  canvasOffsetX: number,
  canvasOffsetY: number,
  canvasImageWidth: number,
  canvasImageHeight: number
) => Render<CanvasRenderingContext2D>

export declare const drawImageScale: (
  imageSource: ImageSource,
  offsetX: number,
  offsetY: number,
  width: number,
  height: number
) => Render<CanvasRenderingContext2D>

export declare const ellipse: (ellipse: Ellipse) => Render<CanvasRenderingContext2D>

export declare const fill: (fillRule?: FillRule, path?: Path2D) => Render<CanvasRenderingContext2D>

export declare const fillPath: <A>(f: Render<A>) => Render<A>

export declare const fillRect: (rect: Rect) => Render<CanvasRenderingContext2D>

export declare const fillText: (
  text: string,
  x: number,
  y: number,
  maxWidth?: number
) => Render<CanvasRenderingContext2D>

export declare const getContext2D: Html<CanvasRenderingContext2D>

export declare const getDimensions: Html<CanvasDimensions>

export declare const getFont: Render<string>

export declare const getHeight: Html<number>

export declare const getImageData: (rect: Rect) => Render<ImageData>

export declare const getLineDash: Render<readonly number[]>

export declare const getTextAlign: Render<TextAlign>

export declare const getTextBaseline: Render<TextBaseline>

export declare const getTransform: Render<DOMMatrix>

export declare const getWidth: Html<number>

export declare const isPointInPath: (point: Point, fillRule?: FillRule, path?: Path2D) => Render<boolean>

export declare const isPointInStroke: (point: Point, path?: Path2D) => Render<boolean>

export declare const lineTo: (point: Point) => Render<CanvasRenderingContext2D>

export declare const measureText: (text: string) => Render<TextMetrics>

export declare const moveTo: (point: Point) => Render<CanvasRenderingContext2D>

export declare const putImageData: (imageData: ImageData, dx: number, dy: number) => Render<CanvasRenderingContext2D>

export declare const putImageDataFull: (
  imageData: ImageData,
  dx: number,
  dy: number,
  dirtyX: number,
  dirtyY: number,
  dirtyWidth: number,
  dirtyHeight: number
) => Render<CanvasRenderingContext2D>

export declare const quadraticCurveTo: (
  cpx: number,
  cpy: number,
  x: number,
  y: number
) => Render<CanvasRenderingContext2D>

export declare const rect: (rect: Rect) => Render<CanvasRenderingContext2D>

export declare const restore: Render<CanvasRenderingContext2D>

export declare const rotate: (angle: number) => Render<CanvasRenderingContext2D>

export declare const save: Render<CanvasRenderingContext2D>

export declare const scale: (scaleX: number, scaleY: number) => Render<CanvasRenderingContext2D>

export declare const setDimensions: (dimensions: CanvasDimensions) => Html<HTMLCanvasElement>

export declare const setFillStyle: (style: string | CanvasGradient | CanvasPattern) => Render<CanvasRenderingContext2D>

export declare const setFont: (font: string) => Render<CanvasRenderingContext2D>

export declare const setGlobalAlpha: (alpha: number) => Render<CanvasRenderingContext2D>

export declare const setGlobalCompositeOperation: (
  compositeOperation: GlobalCompositeOperation
) => Render<CanvasRenderingContext2D>

export declare const setHeight: (height: number) => Html<HTMLCanvasElement>

export declare const setImageSmoothingEnabled: (value: boolean) => Render<CanvasRenderingContext2D>

export declare const setLineCap: (cap: LineCap) => Render<CanvasRenderingContext2D>

export declare const setLineDash: (segments: readonly number[]) => Render<CanvasRenderingContext2D>

export declare const setLineDashOffset: (offset: number) => Render<CanvasRenderingContext2D>

export declare const setLineJoin: (join: LineJoin) => Render<CanvasRenderingContext2D>

export declare const setLineWidth: (width: number) => Render<CanvasRenderingContext2D>

export declare const setMiterLimit: (limit: number) => Render<CanvasRenderingContext2D>

export declare const setShadowBlur: (blur: number) => Render<CanvasRenderingContext2D>

export declare const setShadowColor: (color: string) => Render<CanvasRenderingContext2D>

export declare const setShadowOffsetX: (offsetX: number) => Render<CanvasRenderingContext2D>

export declare const setShadowOffsetY: (offsetY: number) => Render<CanvasRenderingContext2D>

export declare const setStrokeStyle: (style: string) => Render<CanvasRenderingContext2D>

export declare const setTextAlign: (textAlign: TextAlign) => Render<CanvasRenderingContext2D>

export declare const setTextBaseline: (textBaseline: TextBaseline) => Render<CanvasRenderingContext2D>

export declare const setTransform: (
  a: number,
  b: number,
  c: number,
  d: number,
  e: number,
  f: number
) => Render<CanvasRenderingContext2D>

export declare const setTransformMatrix: (matrix: DOMMatrix) => Render<CanvasRenderingContext2D>

export declare const setWidth: (width: number) => Html<HTMLCanvasElement>

export declare const stroke: (path?: Path2D) => Render<CanvasRenderingContext2D>

export declare const strokePath: <A>(f: Render<A>) => Render<A>

export declare const strokeRect: (r: Rect) => Render<CanvasRenderingContext2D>

export declare const strokeText: (
  text: string,
  x: number,
  y: number,
  maxWidth?: number
) => Render<CanvasRenderingContext2D>

export declare const toDataURL: Html<string>

export declare const transform: (
  m11: number,
  m12: number,
  m21: number,
  m22: number,
  m31: number,
  m32: number
) => Render<CanvasRenderingContext2D>

export declare const translate: (translateX: number, translateY: number) => Render<CanvasRenderingContext2D>

export declare const withContext: <A>(f: Render<A>) => Render<A>

export declare const bind: <K extends
  | 'copy'
  | 'fullscreenchange'
  | 'fullscreenerror'
  | 'abort'
  | 'animationcancel'
  | 'animationend'
  | 'animationiteration'
  | 'animationstart'
  | 'auxclick'
  | 'blur'
  | 'cancel'
  | 'canplay'
  | 'canplaythrough'
  | 'change'
  | 'click'
  | 'close'
  | 'contextmenu'
  | 'cuechange'
  | 'dblclick'
  | 'drag'
  | 'dragend'
  | 'dragenter'
  | 'dragexit'
  | 'dragleave'
  | 'dragover'
  | 'dragstart'
  | 'drop'
  | 'durationchange'
  | 'emptied'
  | 'ended'
  | 'error'
  | 'focus'
  | 'focusin'
  | 'focusout'
  | 'gotpointercapture'
  | 'input'
  | 'invalid'
  | 'keydown'
  | 'keypress'
  | 'keyup'
  | 'load'
  | 'loadeddata'
  | 'loadedmetadata'
  | 'loadend'
  | 'loadstart'
  | 'lostpointercapture'
  | 'mousedown'
  | 'mouseenter'
  | 'mouseleave'
  | 'mousemove'
  | 'mouseout'
  | 'mouseover'
  | 'mouseup'
  | 'pause'
  | 'play'
  | 'playing'
  | 'pointercancel'
  | 'pointerdown'
  | 'pointerenter'
  | 'pointerleave'
  | 'pointermove'
  | 'pointerout'
  | 'pointerover'
  | 'pointerup'
  | 'progress'
  | 'ratechange'
  | 'reset'
  | 'resize'
  | 'scroll'
  | 'securitypolicyviolation'
  | 'seeked'
  | 'seeking'
  | 'select'
  | 'selectionchange'
  | 'selectstart'
  | 'stalled'
  | 'submit'
  | 'suspend'
  | 'timeupdate'
  | 'toggle'
  | 'touchcancel'
  | 'touchend'
  | 'touchmove'
  | 'touchstart'
  | 'transitioncancel'
  | 'transitionend'
  | 'transitionrun'
  | 'transitionstart'
  | 'volumechange'
  | 'waiting'
  | 'wheel'
  | 'cut'
  | 'paste'>(
  type: K,
  f: Handler<HTMLElementEventMap[K]>
) => Html<HTMLCanvasElement>

export declare const getCanvasElementById: (id: string) => IO.IO<O.Option<HTMLCanvasElement>>

export declare const unsafeGetCanvasElementById: (id: string) => HTMLCanvasElement

export declare const unsafeGetContext2D: (canvas: HTMLCanvasElement) => CanvasRenderingContext2D

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
}

export type FillRule = 'evenodd' | 'nonzero'

export 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'

export interface Gradient<A> extends R.ReaderIO<CanvasGradient, A> {}

export interface Html<A> extends R.ReaderIO<HTMLCanvasElement, A> {}

export type ImageSource = HTMLCanvasElement | HTMLImageElement | HTMLVideoElement

export type LineCap = 'butt' | 'round' | 'square'

export type LineJoin = 'bevel' | 'miter' | 'round'

export type PatternRepetition = 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y'

export interface Render<A> extends R.ReaderIO<CanvasRenderingContext2D, A> {}

export type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start'

export type TextBaseline = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top'

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
}

export type Handler<E extends Event> = (e: E) => void

export declare const renderTo: (
  canvasId: string,
  onCanvasNotFound: () => IO.IO<void>
) => <A>(r: Render<A>) => IO.IO<void>