since 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 * as RA from 'fp-ts/lib/ReadonlyArray' ; import { sequenceS } from 'fp-ts/lib/Apply' ; import { flow } from 'fp-ts/lib/function' ; import { pipe } from 'fp-ts/lib/pipeable' ; import { Arc , Ellipse , Point , Rect } from './Shape' ; category since export interface Gradient < A > extends R . ReaderIO < CanvasGradient , A > { } category since export interface Html < A > extends R . ReaderIO < HTMLCanvasElement , A > { } category since export interface Render < A > extends R . ReaderIO < CanvasRenderingContext2D , A > { } category since 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 ; } see category since export type FillRule = 'evenodd' | 'nonzero' ; see category since 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' ; deprecated category since export type Handler < E extends Event > = ( e : E ) => void ; see category since export type ImageSource = HTMLCanvasElement | HTMLImageElement | HTMLVideoElement ; see category since export type LineCap = 'butt' | 'round' | 'square' ; see category since export type LineJoin = 'bevel' | 'miter' | 'round' ; see category since export type PatternRepetition = 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y' ; see category since export type TextAlign = 'center' | 'end' | 'left' | 'right' | 'start' ; see category since export type TextBaseline = 'alphabetic' | 'bottom' | 'hanging' | 'ideographic' | 'middle' | 'top' ; see category since 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 ; } category since export const unsafeGetCanvasElementById = ( id ) => document . getElementById ( id ) as HTMLCanvasElement ; category since export const unsafeGetContext2D = ( c ) => c . getContext ( '2d' ) as CanvasRenderingContext2D ; category since export const getCanvasElementById = ( id ) => ( ) => { const canvas = unsafeGetCanvasElementById ( id ) ; return canvas instanceof HTMLCanvasElement ? O . some ( canvas ) : O . none ; } ; category since export const getContext2D = ( c ) => IO . of ( unsafeGetContext2D ( c ) ) ; category since export const getWidth = ( c ) => ( ) => c . width ; category since export const setWidth = ( w ) => ( c ) => ( ) => { c . width = w ; return c ; } ; category since export const getHeight = ( c ) => ( ) => c . height ; category since export const setHeight = ( h ) => ( c ) => ( ) => { c . height = h ; return c ; } ; category since export const getDimensions = ( c ) => sequenceS ( IO . io ) ( { height : getHeight ( c ) , width : getWidth ( c ) } ) ; category since export const setDimensions = ( d ) => pipe ( setWidth ( d . width ) , R . chain ( ( ) => setHeight ( d . height ) ) ) ; category since export const toDataURL = ( c ) => ( ) => c . toDataURL ( ) ; category since export const setFillStyle = ( s ) => ( ctx ) => ( ) => { ctx . fillStyle = s ; return ctx ; } ; category since export const getFont = ( ctx ) => ( ) => ctx . font ; category since export const setFont = ( f ) => ( ctx ) => ( ) => { ctx . font = f ; return ctx ; } ; category since export const setGlobalAlpha = ( a ) => ( ctx ) => ( ) => { ctx . globalAlpha = a ; return ctx ; } ; category since export const setGlobalCompositeOperation = ( gco ) => ( ctx ) => ( ) => { ctx . globalCompositeOperation = gco ; return ctx ; } ; category since export const setImageSmoothingEnabled = ( v ) => ( ctx ) => ( ) => { ctx . imageSmoothingEnabled = v ; return ctx ; } ; category since export const setLineCap = ( c ) => ( ctx ) => ( ) => { ctx . lineCap = c ; return ctx ; } ; category since export const setLineDashOffset = ( o ) => ( ctx ) => ( ) => { ctx . lineDashOffset = o ; return ctx ; } ; category since export const setLineJoin = ( j ) => ( ctx ) => ( ) => { ctx . lineJoin = j ; return ctx ; } ; category since export const setLineWidth = ( w ) => ( ctx ) => ( ) => { ctx . lineWidth = w ; return ctx ; } ; category since export const setMiterLimit = ( l ) => ( ctx ) => ( ) => { ctx . miterLimit = l ; return ctx ; } ; category since export const setShadowBlur = ( b ) => ( ctx ) => ( ) => { ctx . shadowBlur = b ; return ctx ; } ; category since export const setShadowColor = ( c ) => ( ctx ) => ( ) => { ctx . shadowColor = c ; return ctx ; } ; category since export const setShadowOffsetX = ( ox ) => ( ctx ) => ( ) => { ctx . shadowOffsetX = ox ; return ctx ; } ; category since export const setShadowOffsetY = ( oy ) => ( ctx ) => ( ) => { ctx . shadowOffsetY = oy ; return ctx ; } ; category since export const setStrokeStyle = ( s ) => ( ctx ) => ( ) => { ctx . strokeStyle = s ; return ctx ; } ; category since export const getTextAlign = ( ctx ) => ( ) => ctx . textAlign ; category since export const setTextAlign = ( ta ) => ( ctx ) => ( ) => { ctx . textAlign = ta ; return ctx ; } ; category since export const getTextBaseline = ( ctx ) => ( ) => ctx . textBaseline ; category since export const setTextBaseline = ( tb ) => ( ctx ) => ( ) => { ctx . textBaseline = tb ; return ctx ; } ; category since export const arc = ( a ) => ( ctx ) => ( ) => { ctx . arc ( a . x , a . y , a . r , a . start , a . end , a . anticlockwise ) ; return ctx ; } ; category since export const arcTo = ( x1 , y1 , x2 , y2 , r ) => ( ctx ) => ( ) => { ctx . arcTo ( x1 , y1 , x2 , y2 , r ) ; return ctx ; } ; category since export const beginPath = ( ctx ) => ( ) => { ctx . beginPath ( ) ; return ctx ; } ; category since export const bezierCurveTo = ( cpx1 , cpy1 , cpx2 , cpy2 , x , y ) => ( ctx ) => ( ) => { ctx . bezierCurveTo ( cpx1 , cpy1 , cpx2 , cpy2 , x , y ) ; return ctx ; } ; category since export const clearRect = ( r ) => ( ctx ) => ( ) => { ctx . clearRect ( r . x , r . y , r . width , r . height ) ; return ctx ; } ; category since export const clip = ( f , p ) => ( ctx ) => ( ) => { if ( typeof p !== 'undefined' ) { ctx . clip ( p , f ) ; } else if ( typeof f !== 'undefined' ) { ctx . clip ( f ) ; } else { ctx . clip ( ) ; } return ctx ; } ; category since export const closePath = ( ctx ) => ( ) => { ctx . closePath ( ) ; return ctx ; } ; category since export const createImageData = ( sw , sh ) => ( ctx ) => ( ) => ctx . createImageData ( sw , sh ) ; category since export const createImageDataCopy = ( data ) => ( ctx ) => ( ) => ctx . createImageData ( data ) ; category since export const createLinearGradient = ( x0 , y0 , x1 , y1 ) => ( ctx ) => ( ) => ctx . createLinearGradient ( x0 , y0 , x1 , y1 ) ; category since export const createPattern = ( s , r ) => ( ctx ) => ( ) => O . fromNullable ( ctx . createPattern ( s , r ) ) ; category since export const createRadialGradient = ( x0 , y0 , r0 , x1 , y1 , r1 ) => ( ctx ) => ( ) => ctx . createRadialGradient ( x0 , y0 , r0 , x1 , y1 , r1 ) ; category since export const drawFocusIfNeeded = ( el , p ) => ( ctx ) => ( ) => { if ( typeof p !== 'undefined' ) { ctx . drawFocusIfNeeded ( p , el ) ; } else { ctx . drawFocusIfNeeded ( el ) ; } return ctx ; } ; category since export const drawImage = ( s , ox , oy ) => ( ctx ) => ( ) => { ctx . drawImage ( s , ox , oy ) ; return ctx ; } ; category since export const drawImageScale = ( s , ox , oy , w , h ) => ( ctx ) => ( ) => { ctx . drawImage ( s , ox , oy , w , h ) ; return ctx ; } ; category since export const drawImageFull = ( s , ox , oy , w , h , cox , coy , ciw , cih ) => ( ctx ) => ( ) => { ctx . drawImage ( s , ox , oy , w , h , cox , coy , ciw , cih ) ; return ctx ; } ; category since export const ellipse = ( e ) => ( ctx ) => ( ) => { ctx . ellipse ( e . x , e . y , e . rx , e . ry , e . rotation , e . start , e . end , e . anticlockwise ) ; return ctx ; } ; category since export const fill = ( f , p ) => ( ctx ) => ( ) => { if ( typeof p !== 'undefined' ) { ctx . fill ( p , f ) ; } else if ( typeof f !== 'undefined' ) { ctx . fill ( f ) ; } else { ctx . fill ( ) ; } return ctx ; } ; category since export const fillRect = ( r ) => ( ctx ) => ( ) => { ctx . fillRect ( r . x , r . y , r . width , r . height ) ; return ctx ; } ; category since export const fillText = ( t , x , y , mw ) => ( ctx ) => ( ) => { if ( typeof mw !== 'undefined' ) { ctx . fillText ( t , x , y , mw ) ; } else { ctx . fillText ( t , x , y ) ; } return ctx ; } ; category since export const getImageData = ( r ) => ( ctx ) => ( ) => ctx . getImageData ( r . x , r . y , r . width , r . height ) ; category since export const getLineDash = ( ctx ) => ( ) => RA . fromArray ( ctx . getLineDash ( ) ) ; category since export const getTransform = ( ctx ) => ( ) => ctx . getTransform ( ) ; category since export const isPointInPath = ( p , rule , path ) => ( ctx ) => ( ) => { if ( typeof path !== 'undefined' ) { return ctx . isPointInPath ( path , p . x , p . y , rule ) ; } else { return typeof rule !== 'undefined' ? ctx . isPointInPath ( p . x , p . y , rule ) : ctx . isPointInPath ( p . x , p . y ) ; } } ; category since export const isPointInStroke = ( p , path ) => ( ctx ) => ( ) => { return typeof path !== 'undefined' ? ctx . isPointInStroke ( path , p . x , p . y ) : ctx . isPointInStroke ( p . x , p . y ) ; } ; category since export const lineTo = ( p ) => ( ctx ) => ( ) => { ctx . lineTo ( p . x , p . y ) ; return ctx ; } ; category since export const measureText = ( t ) => ( ctx ) => ( ) => ctx . measureText ( t ) ; category since export const moveTo = ( p ) => ( ctx ) => ( ) => { ctx . moveTo ( p . x , p . y ) ; return ctx ; } ; category since export const putImageData = ( data , dx , dy ) => ( ctx ) => ( ) => { ctx . putImageData ( data , dx , dy ) ; return ctx ; } ; category since export const putImageDataFull = ( data , dx , dy , dirtyX , dirtyY , dirtyW , dirtyH ) => ( ctx ) => ( ) => { ctx . putImageData ( data , dx , dy , dirtyX , dirtyY , dirtyW , dirtyH ) ; return ctx ; } ; category since export const quadraticCurveTo = ( cpx , cpy , x , y ) => ( ctx ) => ( ) => { ctx . quadraticCurveTo ( cpx , cpy , x , y ) ; return ctx ; } ; category since export const rect = ( r ) => ( ctx ) => ( ) => { ctx . rect ( r . x , r . y , r . width , r . height ) ; return ctx ; } ; category since export const restore = ( ctx ) => ( ) => { ctx . restore ( ) ; return ctx ; } ; category since export const rotate = ( a ) => ( ctx ) => ( ) => { ctx . rotate ( a ) ; return ctx ; } ; category since export const save = ( ctx ) => ( ) => { ctx . save ( ) ; return ctx ; } ; category since export const scale = ( x , y ) => ( ctx ) => ( ) => { ctx . scale ( x , y ) ; return ctx ; } ; category since export const setLineDash = ( ss ) => ( ctx ) => ( ) => { ctx . setLineDash ( RA . toArray ( ss ) ) ; return ctx ; } ; category since export const setTransform = ( a , b , c , d , e , f ) => ( ctx ) => ( ) => { ctx . setTransform ( a , b , c , d , e , f ) ; return ctx ; } ; category since export const setTransformMatrix = ( matrix ) => ( ctx ) => ( ) => { ctx . setTransform ( matrix ) ; return ctx ; } ; category since export const stroke = ( p ) => ( ctx ) => ( ) => { if ( typeof p !== 'undefined' ) { ctx . stroke ( p ) ; } else { ctx . stroke ( ) ; } return ctx ; } ; category since export const strokeRect = ( r ) => ( ctx ) => ( ) => { ctx . strokeRect ( r . x , r . y , r . width , r . height ) ; return ctx ; } ; category since export const strokeText = ( t , x , y , mw ) => ( ctx ) => ( ) => { if ( typeof mw !== 'undefined' ) { ctx . strokeText ( t , x , y , mw ) ; } else { ctx . strokeText ( t , x , y ) ; } return ctx ; } ; category since export const transform = ( m11 , m12 , m21 , m22 , m31 , m32 ) => ( ctx ) => ( ) => { ctx . transform ( m11 , m12 , m21 , m22 , m31 , m32 ) ; return ctx ; } ; category since export const translate = ( x , y ) => ( ctx ) => ( ) => { ctx . translate ( x , y ) ; return ctx ; } ; category since export const addColorStop = ( o , c ) => ( g ) => ( ) => { g . addColorStop ( o , c ) ; return g ; } ; category since export const fillPath = ( f ) => pipe ( beginPath , R . chain ( ( ) => f ) , R . chainFirst ( ( ) => fill ( ) ) ) ; category since export const strokePath = ( f ) => pipe ( beginPath , R . chain ( ( ) => f ) , R . chainFirst ( ( ) => stroke ( ) ) ) ; category since export const withContext = ( f ) => pipe ( save , R . chain ( ( ) => f ) , R . chainFirst ( ( ) => restore ) ) ; deprecated category since export const bind = ( t , f ) => ( c ) => ( ) => { c . addEventListener ( t , f ) ; return c ; } ; category since export const bindWithContext = < K extends keyof HTMLElementEventMap , A > ( type , f ) : Render < CanvasRenderingContext2D > => ( ctx ) => ( ) => { ctx . canvas . addEventListener ( type , ( e ) => f ( e ) ( ctx ) ( ) ) ; return ctx ; } ; since export const renderTo = ( canvasId , onCanvasNotFound ) => < A > ( r ) : IO . IO < void > => pipe ( getCanvasElementById ( canvasId ) , IO . chain ( O . fold ( onCanvasNotFound , flow ( getContext2D , IO . chain ( r ) ) ) ) ) ;