8 4=      !"#$%&'()*+,-./0123456789:;<Short description(c) Francesco Gazzetta, 2016MITfrancygazz@gmail.com experimentalNone 6How big (and how stretched/cropped) the Image is drawnThe orizinal size of the image'Scale the image to the given dimensionsGClip the image from the given coordinates to the given width and height;Clip (x,y,width,height) and scale (width, height) the imageJust a wrapper around the =$ type. Needed for the Show instance. "Makes an image element from an URL > ?  > ?Short description(c) Francesco Gazzetta, 2016MITfrancygazz@gmail.com experimentalNone .A drawable element. All Pictures are centered. !The empty picture. Draws nothing. A rectangle from the dimensions Same thing but filled)A line from the coordinates of two points!A polygon from a list of verticesAn arc from the radius, start angle, end angle. If the last parameter is True, the direction is counterclockwise TODO replace with Clockwise | Counterclockwise or remove entirelyA filled circle from the radius,Draws some text. The float is the max width.Draws an imageDraws the second   over the first Applies the h to the picture. Innermost colors have the precedence, so you can set a "global color" and override it Rotates the Picture (in radians)0Moves the Picture by the given x and y distancesAA color given r, g, b (all from 0 to 255) and alpha (from 0 to 1)How the text should be alignedJs-style font, ex.  "12px Sans"/A circle from the center coordinates and radius #Shorthand to draw a series of lines@ s are As. The identity is an   (completely transparent) picture and the composing function is the overlapping (the right picture is drawn over the left one).  @      @Short description(c) Francesco Gazzetta, 2016MITfrancygazz@gmail.com experimentalNone!"Renders a picture on a 2D context.!!!!Short description(c) Francesco Gazzetta, 2016MITfrancygazz@gmail.com experimentalSafe")Datatype representing all possible inputs'The three mouse buttons+The four key modifiers1%The state of a button on the keyboard4BConvert a js mouse button identifier to the corresponding datatype5&Convert a bool (from js) to a keystate"#$%&'()*+,-./012345"#$%&'()*+,-./012345123+,-./0'()*"#$%&45"#$%&'()*+,-./012345Short description(c) Francesco Gazzetta, 2016MITfrancygazz@gmail.com experimentalNone6$Get a context from a canvas element.7Create a full screen canvas8/Create a fixed size canvas given the dimensions9.Draws a picture which depends only on the time:]Draws a picture which depends only on the time... and everything else, since you can do I/O.;Lets you manage the input.<Same thing with I/O 6this must be a canvasB789the context to draw onFPSYour drawing function:the context to draw onFPSYour drawing functionCD;the context to draw onFPS Initial stateDrawing functionInput handling functionStepping function<the context to draw onFPS Initial stateDrawing functionInput handling functionStepping function6789:;<6789:;< 6B789:CD;<E      !"#$%&'()*+,*-./00123456789:;<=>?@ABCDEFGHIJKLshine_2roTJnNyhxbJn6yhY244qTGraphics.Shine.PictureGraphics.Shine.ImageGraphics.Shine.RenderGraphics.Shine.InputGraphics.Shinebase Data.Monoid<> ImageSizeOriginal StretchedClippedClippedStretched ImageData unImageData makeImagePictureEmptyRectRectFLinePolygonArcCircleFTextImageOverColoredRotate TranslateColor TextAlignment LeftAlign CenterAlign RightAlignFontcirclepathrenderInputKeyboardMouseBtn MouseWheel MouseMoveBtnLeftBtnRight BtnMiddle ModifiersctrlaltshiftmetaKeyStateDownUp toMouseBtn toKeyState toContextfullScreenCanvasfixedSizeCanvasanimate animateIOplayplayIOghcjs_3QplLXy2vWKBYj9CBnT3bOGHCJS.DOM.TypesHTMLImageElement js_newImage$fShowImageData$fMonoidPictureGHC.BaseMonoidcustomAttributesCanvasgetModifiersMousegetModifiersKeyboard