diff --git a/Browser.sln b/Browser.sln index e141435..93f2597 100644 --- a/Browser.sln +++ b/Browser.sln @@ -53,6 +53,8 @@ Project("{6EC3EE1D-3C4E-46DD-8F32-0CC8E7565705}") = "Browser.ResizeObserver", "s EndProject Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "Browser.EventSource", "src\EventSource\Browser.EventSource.fsproj", "{D79F73C5-8BE4-4D57-8CCD-28CC99B1A9A1}" EndProject +Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "Browser.Canvas", "src\Canvas\Browser.Canvas.fsproj", "{9A5599E6-36CC-4EF1-851B-9784061073D1}" +EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Debug|Any CPU = Debug|Any CPU @@ -351,6 +353,18 @@ Global {D79F73C5-8BE4-4D57-8CCD-28CC99B1A9A1}.Release|x64.Build.0 = Release|Any CPU {D79F73C5-8BE4-4D57-8CCD-28CC99B1A9A1}.Release|x86.ActiveCfg = Release|Any CPU {D79F73C5-8BE4-4D57-8CCD-28CC99B1A9A1}.Release|x86.Build.0 = Release|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Debug|Any CPU.Build.0 = Debug|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Debug|x64.ActiveCfg = Debug|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Debug|x64.Build.0 = Debug|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Debug|x86.ActiveCfg = Debug|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Debug|x86.Build.0 = Debug|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Release|Any CPU.ActiveCfg = Release|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Release|Any CPU.Build.0 = Release|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Release|x64.ActiveCfg = Release|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Release|x64.Build.0 = Release|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Release|x86.ActiveCfg = Release|Any CPU + {9A5599E6-36CC-4EF1-851B-9784061073D1}.Release|x86.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE @@ -379,6 +393,7 @@ Global {B74AA790-1B29-448A-8D75-8399C6C86C71} = {D9506C1D-DF7A-4975-B4A9-80B2EF4ADA2E} {CFEB63B4-8CDC-4FD2-B0C5-4D09BE37D00B} = {D9506C1D-DF7A-4975-B4A9-80B2EF4ADA2E} {D79F73C5-8BE4-4D57-8CCD-28CC99B1A9A1} = {D9506C1D-DF7A-4975-B4A9-80B2EF4ADA2E} + {9A5599E6-36CC-4EF1-851B-9784061073D1} = {D9506C1D-DF7A-4975-B4A9-80B2EF4ADA2E} EndGlobalSection GlobalSection(ExtensibilityGlobals) = postSolution SolutionGuid = {F62BBD2A-9074-44FF-8208-43DA064745DE} diff --git a/README.md b/README.md index 62a7823..95714f4 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,7 @@ Fable bindings for [Browser Web APIs](https://developer.mozilla.org/docs/Web/API |[![Nuget Package](https://img.shields.io/nuget/v/Fable.Browser.IntersectionObserver.svg)](https://www.nuget.org/packages/Fable.Browser.IntersectionObserver)|[Fable.Browser.IntersectionObserver](src/IntersectionObserver)|Bindings for the browser Intersection Observer API| |[![Nuget Package](https://img.shields.io/nuget/v/Fable.Browser.ResizeObserver.svg)](https://www.nuget.org/packages/Fable.Browser.ResizeObserver)|[Fable.Browser.ResizeObserver](src/ResizeObserver)|Bindings for the browser Resize Observer API| |[![Nuget Package](https://img.shields.io/nuget/v/Fable.Browser.IndexedDB.svg)](https://www.nuget.org/packages/Fable.Browser.IndexedDB)|[Fable.Browser.IndexedDB](src/IndexedDB)|Bindings for the browser IndexedDB API| +|[![Nuget Package](https://img.shields.io/nuget/v/Fable.Browser.Canvas.svg)](https://www.nuget.org/packages/Fable.Browser.Canvas)|[Fable.Browser.ResizeObserver](src/Canvas)|Bindings for the browser Canvas API| ## Usage diff --git a/build.fsx b/build.fsx index 9e65cb8..54eea52 100644 --- a/build.fsx +++ b/build.fsx @@ -30,6 +30,7 @@ let packages = "IntersectionObserver" "ResizeObserver" "EventSource" + "Canvas" ] let ignoreCaseEquals (str1: string) (str2: string) = diff --git a/src/Canvas/Browser.Canvas.fs b/src/Canvas/Browser.Canvas.fs new file mode 100644 index 0000000..ddc7ec0 --- /dev/null +++ b/src/Canvas/Browser.Canvas.fs @@ -0,0 +1,1380 @@ +namespace Browser.Types + +open Fable.Core +open Fable.Core.JS + +/// +/// Represents the settings for a CanvasRenderingContext2D. +/// +type CanvasRenderingContext2DSettings = + /// + /// Gets a Boolean indicating if the canvas contains an alpha channel. + /// + /// + /// If false, the backdrop is always opaque, which can speed up drawing of transparent content and images. + /// + abstract alpha: bool option with get, set + + /// + /// Gets the color space of the rendering context. + /// + /// + /// Possible values are "srgb" (denotes the sRGB color space) and "display-p3" (denotes the display-p3 color space). + /// + abstract colorSpace: string option with get, set + + /// + /// Gets a Boolean indicating if the user agent reduced the latency by desynchronizing the canvas paint cycle from the event loop. + /// + abstract desynchronized: bool option with get, set + + /// + /// Gets a Boolean indicating whether or not this canvas uses software acceleration (instead of hardware acceleration) to support frequent read-back operations via getImageData(). + /// + abstract willReadFrequently: bool option with get, set + +type [] LineCap = + /// + /// The ends of lines are squared off at the endpoints. Default value. + /// + | Butt + + /// + /// The ends of lines are rounded. + /// + | Round + + /// + /// The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness. + /// + | Square + +type [] LineJoin = + /// + /// Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. + /// + /// + /// The radius for these rounded corners is equal to the line width. + /// + | Round + + /// + /// Fills an additional triangular area between the common endpoint of connected segments and the separate outside rectangular corners of each segment. + /// + | Bevel + + /// + /// Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. + /// + /// + /// This setting is affected by the miterLimit property. Default value. + /// + | Miter + +type [] TextAlign = + /// + /// The text is left-aligned. + /// + | Left + + /// + /// The text is right-aligned. + /// + | Right + + /// + /// The text is centered. + /// + | Center + + /// + /// The text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales). + /// + | Start + + /// + /// The text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales). + /// + | End + +type [] TextBaseline = + /// + /// The text baseline is the top of the em square. + /// + | Top + + /// + /// The text baseline is the hanging baseline. + /// + /// + /// Used by Tibetan and other Indic scripts. + /// + | Hanging + + /// + /// The text baseline is the middle of the em square. + /// + | Middle + + /// + /// The text baseline is the normal alphabetic baseline. + /// + /// + /// Default value. + /// + | Alphabetic + + /// + /// The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. + /// + /// + /// Used by Chinese, Japanese, and Korean scripts. + /// + | Ideographic + + /// + /// The text baseline is the bottom of the bounding box. + /// + /// + /// This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders. + /// + | Bottom + +type [] TextDirection = + /// + /// The text direction is left-to-right. + /// + | Ltr + + /// + /// The text direction is right-to-left. + /// + | Rtl + + /// + /// The text direction is inherited from the canvas element or the Document as appropriate. Default value. + /// + | Inherit + +type [] FontKerning = + /// + /// The browser determines whether font kerning should be used or not. + /// + /// + /// For example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text. + /// + | Auto + + /// + /// Font kerning information stored in the font must be applied. + /// + | Normal + + /// + /// Font kerning information stored in the font is disabled. + /// + | None + +type [] TextRendering = + /// + /// The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. + /// + | Auto + + /// + /// The browser emphasizes rendering speed over legibility and geometric precision when drawing text. + /// + /// + /// This disables kerning and ligatures. + /// + | OptimizeSpeed + + /// + /// The browser emphasizes legibility over rendering speed and geometric precision. + /// + /// + /// This enables kerning and optional ligatures. + /// + | OptimizeLegibility + + /// + /// The browser emphasizes geometric precision over rendering speed and legibility. + /// + /// + /// Certain aspects of fonts, such as kerning, don't scale linearly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect (neither rounded up nor down to the nearest font size supported by the underlying operating system). + /// + | GeometricPrecision + +/// +/// Represents the fill rule options for CanvasRenderingContext2D. +/// +type [] FillRule = + /// + /// The non-zero winding rule. + /// + /// + /// Default rule. + /// + | Nonzero + + /// + /// The even-odd winding rule. + /// + | Evenodd + +type [] GlobalCompositeOperation = + /// + /// Draws new shapes on top of the existing canvas content (default). + /// + | SourceOver + + /// + /// Draws the new shape where it overlaps with the existing content, making everything else transparent. + /// + | SourceIn + + /// + /// Draws the new shape where it doesn't overlap with the existing content. + /// + | SourceOut + + /// + /// Draws the new shape only where it overlaps the existing content. + /// + | SourceAtop + + /// + /// Draws new shapes behind the existing canvas content. + /// + | DestinationOver + + /// + /// Keeps the existing canvas content where it overlaps with the new shape, making everything else transparent. + /// + | DestinationIn + + /// + /// Keeps the existing content where it doesn't overlap with the new shape. + /// + | DestinationOut + + /// + /// The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content. + /// + | DestinationAtop + + /// + /// Keeps the existing canvas where it overlaps with the new shape, drawing the new shape behind the canvas content. + /// + | Lighter + + /// + /// Determines color values by adding where shapes overlap. + /// + | Copy + + /// + /// Makes shapes transparent where they overlap and draws normally everywhere else. + /// + | Xor + + /// + /// Multiplies pixels of the top layer with the bottom layer, resulting in a darker image. + /// + | Multiply + + /// + /// Inverts, multiplies, and inverts again, producing a lighter image (opposite of multiply). + /// + | Screen + + /// + /// Combines multiply and screen, making dark parts darker and light parts lighter. + /// + | Overlay + + /// + /// Retains the darkest pixels of both layers. + /// + | Darken + + /// + /// Retains the lightest pixels of both layers. + /// + | Lighten + + /// + /// Divides the bottom layer by the inverted top layer. + /// + | ColorDodge + + /// + /// Divides the inverted bottom layer by the top layer and then inverts the + /// result. + /// + | ColorBurn + + /// + /// Like overlay, a combination of multiply and screen — but instead with the top layer and bottom layer swapped. + /// + | HardLight + + /// + /// A softer version of hard-light, preserving color information. + /// + | SoftLight + + /// + /// Subtracts one layer from the other, always resulting in a positive value. + /// + | Difference + + /// + /// Similar to "difference," but with lower contrast. + /// + | Exclusion + + /// + /// Preserves luma and chroma of the bottom layer, adopting the hue of the top layer. + /// + | Hue + + /// + /// Preserves luma and hue of the bottom layer, adopting the chroma of the top layer. + /// + | Saturation + + /// + /// Preserves luma of the bottom layer, adopting the hue and chroma of the top layer. + /// + | Color + + /// + /// Preserves hue and chroma of the bottom layer, adopting the luma of the top layer. + /// + | Luminosity + +/// +/// Represents the dimensions of a piece of text in the canvas. +/// +type TextMetrics = + /// + /// Returns the width of a segment of inline text in CSS pixels. + /// + /// + /// It takes into account the current font of the context. + /// + abstract member width : float + + /// + /// Distance parallel to the baseline from the alignment point given by the CanvasRenderingContext2D.textAlign property to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point. + /// + abstract member actualBoundingBoxLeft : float + + /// + /// Returns the distance from the alignment point given by the CanvasRenderingContext2D.textAlign property to the right side of the bounding rectangle of the given text, in CSS pixels. The distance is measured parallel to the baseline. + /// + abstract member actualBoundingBoxRight : float + + /// + /// Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels. + /// + abstract member fontBoundingBoxAscent : float + + /// + /// Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels. + /// + abstract member fontBoundingBoxDescent : float + + /// + /// Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the top of the bounding rectangle used to render the text, in CSS pixels. + /// + abstract member actualBoundingBoxAscent : float + + /// + /// Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels. + /// + abstract member actualBoundingBoxDescent : float + + /// + /// Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the top of the em square in the line box, in CSS pixels. + /// + abstract member emHeightAscent : float + + /// + /// Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the bottom of the em square in the line box, in CSS pixels. + /// + abstract member emHeightDescent : float + + /// + /// Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the hanging baseline of the line box, in CSS pixels. + /// + abstract member hangingBaseline : float + + /// + /// Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the alphabetic baseline of the line box, in CSS pixels. + /// + abstract member alphabeticBaseline : float + + /// + /// Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the ideographic baseline of the line box, in CSS pixels. + /// + abstract member ideographicBaseline : float + +type [] ColorSpace = + | Srgb + | DisplayP3 + +type ImageDataSettings = + ///Specifies the color space of the image data + abstract colorSpace: ColorSpace with get, set + +/// +/// Represents an ImageData object used to manipulate image data. +/// +[] +type ImageData() = + /// + /// Creates a new ImageData object with the specified width and height. + /// + /// An unsigned long representing the width of the image. + /// An unsigned long representing the height of the image. + /// An optional object specifying color space. Possible values: "srgb", "display-p3". + [] + new (width: int, height: int, ?settings: ImageDataSettings) = ImageData() + + /// + /// Creates a new ImageData object from the given data array and width. + /// + /// A Uint8ClampedArray containing pixel data. + /// An unsigned long representing the width of the image. + /// An unsigned long representing the height of the image (optional). + /// An optional object specifying color space. Possible values: "srgb", "display-p3". + [] + new (dataArray: Uint8ClampedArray, width: int, ?height: int, ?settings: ImageDataSettings) = ImageData() + + /// + /// Gets a Uint8ClampedArray that contains the pixel data of the ImageData object. + /// + /// + /// The data is stored as a one-dimensional array in the RGBA order, with values between 0 and 255 (inclusive). + /// + /// A Uint8ClampedArray containing pixel data. + [] + member _.data = jsNative + + /// + /// Gets the color space of the image data. + /// + /// + /// This property can have the following values: "srgb" representing the sRGB color space. "display-p3" representing the display-p3 color space. + /// + [] + member _.colorSpace = jsNative + + /// + /// Gets the number of rows in the ImageData object. + /// + [] + member _.height = jsNative + + /// + /// Gets the number of pixels per row in the ImageData object. + /// + [] + member _.width = jsNative + +/// +/// Represents the quality options for image smoothing. +/// +type [] ImageSmoothingQualityOptions = + /// + /// Low quality. + /// + | Low + /// + /// Medium quality. + /// + | Medium + /// + /// High quality. + /// + | High + +type PathContext2D = + /// + /// Attempts to add a straight line from the current point to the start of the current sub-path. + /// + /// + /// If the shape has already been closed or has only one point, this function does nothing. This method doesn't draw anything to the canvas directly. You can render the path using the or methods. + /// + abstract member closePath : unit -> unit + + /// + /// Adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates. + /// + /// The x-axis coordinate of the line's end point. + /// The y-axis coordinate of the line's end point. + abstract member lineTo : x:float * y:float -> unit + + /// + /// Begins a new sub-path at the point specified by the given (x, y) coordinates. + /// + /// The x-axis (horizontal) coordinate of the point. + /// The y-axis (vertical) coordinate of the point. + abstract member moveTo : x:float * y:float -> unit + + /// + /// Adds a cubic Bézier curve to the current sub-path. + /// + /// + /// It requires three points: the first two are control points, and the third one is the end point. The starting point is the latest point in the current path. + /// + /// The x-axis coordinate of the first control point. + /// The y-axis coordinate of the first control point. + /// The x-axis coordinate of the second control point. + /// The y-axis coordinate of the second control point. + /// The x-axis coordinate of the end point. + /// The y-axis coordinate of the end point. + abstract member bezierCurveTo : cp1x:float * cp1y:float * cp2x:float * cp2y:float * x:float * y:float -> unit + + /// + /// Adds a quadratic Bézier curve to the current sub-path. + /// + /// + /// It requires two points: the first one is a control point, and the second one is the end point. The starting point is the latest point in the current path. + /// + /// The x-axis coordinate of the control point. + /// The y-axis coordinate of the control point. + /// The x-axis coordinate of the end point. + /// The y-axis coordinate of the end point. + abstract member quadraticCurveTo : cpx:float * cpy:float * x:float * y:float -> unit + + /// + /// Adds a circular arc to the current sub-path. + /// + /// The horizontal coordinate of the arc's center. + /// The vertical coordinate of the arc's center. + /// The arc's radius. Must be positive. + /// The angle at which the arc starts in radians, measured from the positive x-axis. + /// The angle at which the arc ends in radians, measured from the positive x-axis. + /// An optional boolean value. If true, draws the arc counter-clockwise between the start and end angles. The default is false (clockwise). + abstract member arc : x:float * y:float * radius:float * startAngle:float * endAngle:float * ?counterclockwise:bool -> unit + + /// + /// Adds a circular arc to the current sub-path using the given control points and radius. + /// + /// The x-axis coordinate of the first control point. + /// The y-axis coordinate of the first control point. + /// The x-axis coordinate of the second control point. + /// The y-axis coordinate of the second control point. + /// The arc's radius. Must be non-negative. + abstract member arcTo : x1:float * y1:float * x2:float * y2:float * radius:float -> unit + + /// + /// Adds an elliptical arc to the current sub-path. + /// + /// The x-axis (horizontal) coordinate of the ellipse's center. + /// The y-axis (vertical) coordinate of the ellipse's center. + /// The ellipse's major-axis radius. Must be non-negative. + /// The ellipse's minor-axis radius. Must be non-negative. + /// The rotation of the ellipse, expressed in radians. + /// The eccentric angle at which the ellipse starts, measured clockwise from the positive x-axis and expressed in radians. + /// The eccentric angle at which the ellipse ends, measured clockwise from the positive x-axis and expressed in radians. + /// An optional boolean value. If true, draws the ellipse counterclockwise (anticlockwise). The default value is false (clockwise). + abstract member ellipse : x:float * y:float * radiusX:float * radiusY:float * rotation:float * startAngle:float * endAngle:float* ?counterclockwise:bool -> unit + + /// + /// Adds a rectangle to the current path. + /// + /// The x-axis coordinate of the rectangle's starting point. + /// The y-axis coordinate of the rectangle's starting point. + /// The rectangle's width. Positive values are to the right, and negative values are to the left. + /// The rectangle's height. Positive values are down, and negative values are up. + abstract member rect : x:float * y:float * width:float * height:float -> unit + + /// + /// Adds a rounded rectangle to the current path. + /// + /// The x-axis coordinate of the rectangle's starting point, in pixels. + /// The y-axis coordinate of the rectangle's starting point, in pixels. + /// The rectangle's width. Positive values are to the right, and negative values are to the left. + /// The rectangle's height. Positive values are down, and negative values are up. + /// A number, list, DOMPoint, DOMPointReadOnly instance, or an object specifying the radii of the circular arc to be used for the corners of the rectangle. The number and order of the radii function similarly to the border-radius CSS property when width and height are positive: - [all-corners] - [top-left-and-bottom-right, top-right-and-bottom-left] - [top-left, top-right-and-bottom-left, bottom-right] - [top-left, top-right, bottom-right, bottom-left] If width is negative, the rounded rectangle is flipped horizontally, and the radius values are adjusted accordingly. Similarly, when height is negative, the rounded rectangle is flipped vertically. The specified radii may be scaled if any of the edges are shorter than the combined radius of the vertices on either end. + abstract member roundRect : x:float * y:float * width:float * height:float * radii:float -> unit + + /// + /// Adds a rounded rectangle to the current path. + /// + /// The x-axis coordinate of the rectangle's starting point, in pixels. + /// The y-axis coordinate of the rectangle's starting point, in pixels. + /// The rectangle's width. Positive values are to the right, and negative values are to the left. + /// The rectangle's height. Positive values are down, and negative values are up. + /// A number, list, DOMPoint, DOMPointReadOnly instance, or an object specifying the radii of the circular arc to be used for the corners of the rectangle. The number and order of the radii function similarly to the border-radius CSS property when width and height are positive: - [all-corners] - [top-left-and-bottom-right, top-right-and-bottom-left] - [top-left, top-right-and-bottom-left, bottom-right] - [top-left, top-right, bottom-right, bottom-left] If width is negative, the rounded rectangle is flipped horizontally, and the radius values are adjusted accordingly. Similarly, when height is negative, the rounded rectangle is flipped vertically. The specified radii may be scaled if any of the edges are shorter than the combined radius of the vertices on either end. + abstract member roundRect : x:float * y:float * width:float * height:float * radii:float array -> unit + + /// + /// Adds a rounded rectangle to the current path. + /// + /// The x-axis coordinate of the rectangle's starting point, in pixels. + /// The y-axis coordinate of the rectangle's starting point, in pixels. + /// The rectangle's width. Positive values are to the right, and negative values are to the left. + /// The rectangle's height. Positive values are down, and negative values are up. + /// A number, list, DOMPoint, DOMPointReadOnly instance, or an object specifying the radii of the circular arc to be used for the corners of the rectangle. The number and order of the radii function similarly to the border-radius CSS property when width and height are positive: - [all-corners] - [top-left-and-bottom-right, top-right-and-bottom-left] - [top-left, top-right-and-bottom-left, bottom-right] - [top-left, top-right, bottom-right, bottom-left] If width is negative, the rounded rectangle is flipped horizontally, and the radius values are adjusted accordingly. Similarly, when height is negative, the rounded rectangle is flipped vertically. The specified radii may be scaled if any of the edges are shorter than the combined radius of the vertices on either end. + abstract member roundRect : x:float * y:float * width:float * height:float * radii:obj -> unit + +/// The Path2D interface of the Canvas 2D API is used to declare a path that can then be used on a CanvasRenderingContext2D object +type Path2D = + inherit PathContext2D + + /// + /// Adds one Path2D object to another Path2D object. + /// + /// A Path2D path to add. + /// An optional DOMMatrix to be used as the transformation matrix for the path that is added. + abstract addPath : path: Path2D * ?transform: obj -> unit + +type Path2DStatic = + /// + /// Creates a new empty Path2D object. + /// + [] + abstract Create: unit -> Path2D + + /// + /// Creates a new Path2D object as a copy of the provided path. + /// + /// The Path2D object to copy. + [] + abstract Create: path: Path2D -> Path2D + + /// + /// Creates a new Path2D object from the specified SVG path data. + /// + /// A string containing SVG path data. + [] + abstract Create: d: string -> Path2D + +/// The CanvasGradient interface represents an opaque object describing a gradient +type CanvasGradient = + /// + /// Adds a new color stop to the gradient, defined by an offset and a color. + /// + /// A number between 0 and 1, inclusive, representing the position of the color stop. 0 represents the start of the gradient, and 1 represents the end. + /// A CSS <color> value representing the color of the stop. + abstract member addColorStop : offset:float * color:string -> unit + +/// The CanvasPattern interface represents an opaque object describing a pattern, based on an image, a canvas, or a video +type CanvasPattern = + /// + /// Uses a DOMMatrix object as the pattern's transformation matrix and invokes it on the pattern. + /// + /// A DOMMatrix to use as the pattern's transformation matrix. + abstract member setTransform : matrix:obj -> unit + +type [] PaintStyle = + /// + /// A string parsed as a CSS <color> value. + /// + | Color of string + + /// + /// A CanvasGradient object (a linear or radial gradient). + /// + | Gradient of CanvasGradient + + /// + /// A CanvasPattern object (a repeating image). + /// + | Pattern of CanvasPattern + +/// +/// Represents the repetition options for creating a pattern. +/// +type [] Repetition = + /// + /// Repeat the pattern in both horizontal and vertical directions. + /// + | Repeat + + /// + /// Repeat the pattern only in the horizontal direction. + /// + | RepeatX + + /// + /// Repeat the pattern only in the vertical direction. + /// + | RepeatY + + /// + /// Do not repeat the pattern in either direction. + /// + | NoRepeat + +type TransformMatrix = + abstract a: float with get, set + abstract b: float with get, set + abstract c: float with get, set + abstract d: float with get, set + abstract e: float with get, set + abstract f: float with get, set + +type CanvasRenderingContext2D = + inherit PathContext2D + + /// + /// Sets the pixels in a rectangular area to transparent black (rgba(0,0,0,0)). + /// + /// The x-axis coordinate of the rectangle's top-left corner. + /// The y-axis coordinate of the rectangle's top-left corner. + /// The width of the rectangle. Positive values move to the right, and negative values to the left. + /// The height of the rectangle. Positive values move down, and negative values move up. + abstract member clearRect : x:float * y:float * width:float * height:float -> unit + + /// + /// Draws a filled rectangle on the canvas. + /// + /// + /// The rectangle's fill style is determined by the current fillStyle attribute. This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. + /// + /// The x-axis coordinate of the rectangle's starting point. + /// The y-axis coordinate of the rectangle's starting point. + /// The width of the rectangle. Positive values move to the right, and negative values to the left. + /// The height of the rectangle. Positive values move down, and negative values move up. + abstract member fillRect : x:float * y:float * width:float * height:float -> unit + + /// + /// Draws a stroked rectangle on the canvas. + /// + /// The x-axis coordinate of the rectangle's starting point. + /// The y-axis coordinate of the rectangle's starting point. + /// The width of the rectangle. Positive values move to the right, and negative values to the left. + /// The height of the rectangle. Positive values move down, and negative values move up. + abstract member strokeRect : x:float * y:float * width:float * height:float -> unit + + /// + /// Draws a text string at the specified coordinates, filling the string's characters with the current fillStyle. + /// + /// A string specifying the text string to render into the context. + /// The x-axis coordinate of the point at which to begin drawing the text, in pixels. + /// The y-axis coordinate of the baseline on which to begin drawing the text, in pixels. + /// Optional. The maximum number of pixels wide the text may be once rendered. If not specified, there is no limit to the width of the text. However, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font size in order to fit the text in the specified width. + abstract member fillText : text:string * x:float * y:float * ?maxWidth:float -> unit + + /// + /// Strokes — that is, draws the outlines of — the characters of a text string at the specified coordinates. + /// + /// A string specifying the text string to render into the context. + /// The x-axis coordinate of the point at which to begin drawing the text. + /// The y-axis coordinate of the point at which to begin drawing the text. + /// Optional. The maximum width the text may be once rendered. If not specified, there is no limit to the width of the text. However, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font size in order to fit the text in the specified width. + abstract member strokeText : text:string * x:float * y:float * ?maxWidth:float -> unit + + /// + /// Returns a TextMetrics object that contains information about the measured text, such as its width. + /// + /// The text string to measure. + /// A TextMetrics object. + abstract member measureText : text:string -> TextMetrics + + /// + /// Gets or sets the thickness of lines. + /// + /// + /// A number specifying the line width, in coordinate space units. Zero, negative, Infinity, and NaN values are ignored. The default value is 1.0. + /// + abstract member lineWidth : float with get, set + + /// + /// Gets or sets the shape used to draw the end points of lines. + /// + abstract member lineCap : LineCap with get, set + + /// + /// Gets or sets the shape used to join two line segments where they meet. + /// + abstract member lineJoin : LineJoin with get, set + + /// + /// Gets or sets the miter limit ratio. + /// + /// + /// A number specifying the miter limit ratio, in coordinate space units. Zero, negative, Infinity, and NaN values are ignored. The default value is 10.0. + /// + abstract member miterLimit : float with get, set + + /// + /// Gets the current line dash pattern. + /// + /// + /// An array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number, when setting the elements, is odd, the elements of the array get copied and concatenated. For example, setting the line dash to [5, 15, 25] will result in getting back [5, 15, 25, 5, 15, 25]. + /// + abstract member getLineDash : unit -> float[] + + /// + /// Sets the line dash pattern used when stroking lines. + /// + /// An array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25]. If the array is empty, the line dash list is cleared, and line strokes return to being solid. + abstract member setLineDash : segments:float[] -> unit + + /// + /// Gets or sets the line dash offset, or "phase." + /// + /// + /// A float specifying the amount of the line dash offset. The default value is 0.0. + /// + abstract member lineDashOffset : float with get, set + + /// + /// Gets or sets the current text style to use when drawing text. + /// + /// + /// A string parsed as a CSS font value. The default font is "10px sans-serif." + /// + abstract member font : string with get, set + + /// + /// Gets or sets the current text alignment used when drawing text. + /// + /// + /// The default value is . + /// + abstract member textAlign : TextAlign with get, set + + /// + /// Gets or sets the current text baseline used when drawing text. + /// + /// + /// The default value is . + /// + abstract member textBaseline : TextBaseline with get, set + + /// + /// Gets or sets the spacing between letters when drawing text. + /// + /// + /// The letter spacing as a string in the CSS length data format. The default is "0px." The property value will remain unchanged if set to an invalid/unparsable value. + /// + abstract member letterSpacing : string with get, set + + /// + /// Gets or sets how font kerning information is used. + /// + abstract member fontKerning : FontKerning with get, set + + /// + /// Gets or sets information to the rendering engine about what to optimize for when rendering text. + /// + abstract member textRendering : TextRendering with get, set + + /// + /// Gets or sets the spacing between words when drawing text. + /// + /// + /// The word spacing as a string in the CSS length data format. The default is "0px." The property can be used to get or set the spacing, and the property value will remain unchanged if set to an invalid/unparsable value. + /// + abstract member wordSpacing : string with get, set + + /// + /// Gets or sets the color, gradient, or pattern to use inside shapes. + /// + abstract member fillStyle : PaintStyle with get, set + + /// + /// Gets or sets the color, gradient, or pattern to use for the strokes (outlines) around shapes. + /// + abstract member strokeStyle : PaintStyle with get, set + + /// + /// Creates a conic gradient around a point with given coordinates. + /// + /// The angle at which to begin the gradient, in radians. The angle starts from a line going horizontally right from the center, and proceeds clockwise. + /// The x-axis coordinate of the center of the gradient. + /// The y-axis coordinate of the center of the gradient. + /// A conic CanvasGradient. + abstract member createConicGradient : startAngle:float * x:float * y:float -> CanvasGradient + + /// + /// Creates a gradient along the line connecting two given coordinates. + /// + /// The x-axis coordinate of the start point. + /// The y-axis coordinate of the start point. + /// The x-axis coordinate of the end point. + /// The y-axis coordinate of the end point. + /// A linear CanvasGradient initialized with the specified line. + /// NotSupportedError - Thrown when non-finite values are passed as parameters. + abstract member createLinearGradient : x0:float * y0:float * x1:float * y1:float -> CanvasGradient + + /// + /// Creates a radial gradient using the size and coordinates of two circles. + /// + /// The x-axis coordinate of the start circle. + /// The y-axis coordinate of the start circle. + /// The radius of the start circle. Must be non-negative and finite. + /// The x-axis coordinate of the end circle. + /// The y-axis coordinate of the end circle. + /// The radius of the end circle. Must be non-negative and finite. + /// A radial CanvasGradient initialized with the two specified circles. + /// NotSupportedError - Thrown when non-finite values are passed as parameters. + /// IndexSizeError - Thrown when a negative radius is passed as a parameter. + abstract member createRadialGradient : x0:float * y0:float * r0:float * x1:float * y1:float * r1:float -> CanvasGradient + + /// + /// Creates a pattern using the specified image and repetition. + /// + /// An image to be used as the pattern's image. It can be any of the following: - HTMLImageElement (img) - SVGImageElement (image) - HTMLVideoElement (video, by using the capture of the video) - HTMLCanvasElement (canvas) - ImageBitmap - OffscreenCanvas - VideoFrame + /// A string indicating how to repeat the pattern's image. If repetition is specified as an empty string ("") or null (but not undefined), a value of "repeat" will be used. + /// + /// A CanvasPattern object describing a pattern. If the image is not fully loaded (HTMLImageElement.complete is false), then null is returned. + /// + abstract member createPattern : image:obj * repetition:Repetition -> CanvasPattern + + /// + /// Specifies the amount of blur applied to shadows. + /// + /// + /// Shadows are only drawn if the property is set to a non-transparent value. + /// At least one of the , , or properties must be non-zero to render shadows. + /// + /// + /// A non-negative float specifying the level of shadow blur, where 0 represents no blur, and larger numbers represent increasingly more blur. This value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0. Negative, Infinity, and NaN values are ignored. + /// + abstract member shadowBlur : float with get, set + + /// + /// Specifies the color of shadows. + /// + /// + /// Be aware that the shadow's rendered opacity will be affected by the opacity of the color when filling, and of the color when stroking. + /// Shadows are only drawn if the property is set to a non-transparent value. + /// At least one of the , , or properties must be non-zero to render shadows. + /// + /// + /// A string parsed as a CSS color value. The default value is fully-transparent black. + /// + abstract member shadowColor : string with get, set + + /// + /// Specifies the distance that shadows will be offset horizontally. + /// + /// + /// Shadows are only drawn if the property is set to a non-transparent value. + /// At least one of the , , or properties must be non-zero to render shadows. + /// + /// + /// A float specifying the distance that shadows will be offset horizontally. Positive values are to the right, and negative values are to the left. The default value is 0 (no horizontal offset). Infinity and NaN values are ignored. + /// + abstract member shadowOffsetX : float with get, set + + /// + /// Specifies the distance that shadows will be offset vertically. + /// + /// + /// Shadows are only drawn if the property is set to a non-transparent value. + /// At least one of the , , or properties must be non-zero to render shadows. + /// + /// + /// A float specifying the distance that shadows will be offset vertically. Positive values are down, and negative values are up. The default value is 0 (no vertical offset). Infinity and NaN values are ignored. + /// + abstract member shadowOffsetY : float with get, set + + /// + /// Starts a new path by emptying the list of sub-paths. + /// + /// + /// Call this method when you want to create a new path. To create a new sub-path, i.e., one matching the current canvas state, you can use . + /// + abstract member beginPath : unit -> unit + + /// + /// Fills the current or given path with the current fillStyle. + /// + /// An optional Path2D path to fill. + /// An optional fill rule that determines if a point is inside or outside the filling region. Default rule is "nonzero". + abstract member fill : ?path: Path2D * ?fillRule: FillRule -> unit + + /// + /// Strokes (outlines) the current or given path with the current stroke style. + /// + /// + /// Strokes are aligned to the center of a path; half of the stroke is drawn on the inner side, and half on the outer side. The stroke is drawn using the non-zero winding rule, meaning that path intersections will still get filled. + /// + /// A Path2D path to stroke. If not specified, the current path is stroked. + abstract stroke : ?path:Path2D -> unit + + /// + /// Draws a focus ring around the current or given path if the specified element is focused. + /// + /// The element to check whether it is focused or not. + /// None (undefined). + abstract drawFocusIfNeeded : element:Element -> unit + + /// + /// Draws a focus ring around the specified path if the specified element is focused. + /// + /// A Path2D path to use. + /// The element to check whether it is focused or not. + /// None (undefined). + abstract drawFocusIfNeeded : path:Path2D * element:Element -> unit + + /// + /// Turns the current path into the current clipping region. + /// + /// + /// The previous clipping region, if any, is intersected with the current path to create the new clipping region. + /// + abstract member clip : unit -> unit + + /// + /// Turns the specified path into the current clipping region. + /// + /// + /// The previous clipping region, if any, is intersected with the specified path to create the new clipping region. + /// + /// A Path2D path to use as the clipping region. + abstract member clip : path:Path2D -> unit + + /// + /// Turns the current path into the current clipping region with the specified fill rule. + /// + /// + /// The previous clipping region, if any, is intersected with the current path to create the new clipping region. + /// + /// The algorithm by which to determine if a point is inside or outside the clipping region. Possible values: "nonzero" (default), "evenodd". + abstract member clip : fillRule:FillRule -> unit + + /// + /// Turns the specified path into the current clipping region with the specified fill rule. + /// + /// + /// The previous clipping region, if any, is intersected with the specified path to create the new clipping region. + /// + /// A Path2D path to use as the clipping region. + /// The algorithm by which to determine if a point is inside or outside the clipping region. Possible values: "nonzero" (default), "evenodd". + /// None (undefined). + abstract clip : path:Path2D * fillRule:FillRule -> unit + + /// + /// Reports whether or not the specified point is contained in the current path. + /// + /// The x-axis coordinate of the point to check, unaffected by the current transformation of the context. + /// The y-axis coordinate of the point to check, unaffected by the current transformation of the context. + /// True if the point is inside the path; false otherwise. + abstract isPointInPath : x:float * y:float -> bool + + /// + /// Reports whether or not the specified point is contained in the current path with the specified fill rule. + /// + /// The x-axis coordinate of the point to check, unaffected by the current transformation of the context. + /// The y-axis coordinate of the point to check, unaffected by the current transformation of the context. + /// The algorithm to determine if a point is inside or outside the path (nonzero or evenodd). + /// True if the point is inside the path; false otherwise. + abstract isPointInPath : x:float * y:float * fillRule:FillRule -> bool + + /// + /// Reports whether or not the specified point is contained in the specified path. + /// + /// A Path2D path to check against. + /// The x-axis coordinate of the point to check, unaffected by the current transformation of the context. + /// The y-axis coordinate of the point to check, unaffected by the current transformation of the context. + /// True if the point is inside the path; false otherwise. + abstract isPointInPath : path:Path2D * x:float * y:float -> bool + + /// + /// Reports whether or not the specified point is contained in the specified path with the specified fill rule. + /// + /// A Path2D path to check against. + /// The x-axis coordinate of the point to check, unaffected by the current transformation of the context. + /// The y-axis coordinate of the point to check, unaffected by the current transformation of the context. + /// The algorithm to determine if a point is inside or outside the path (nonzero or evenodd). + /// True if the point is inside the path; false otherwise. + abstract isPointInPath : path:Path2D * x:float * y:float * fillRule:FillRule -> bool + + /// + /// Reports whether or not the specified point is inside the area contained by the stroking of a path. + /// + /// + /// If the path is unspecified, the current path is used. + /// + /// The x-axis coordinate of the point to check. + /// The y-axis coordinate of the point to check. + /// A boolean value indicating whether the point is inside the area contained by the stroking of a path. + abstract isPointInStroke : x:float * y:float -> bool + + /// + /// Reports whether or not the specified point is inside the area contained by the stroking of a path. + /// + /// A Path2D path to check against. + /// The x-axis coordinate of the point to check. + /// The y-axis coordinate of the point to check. + /// A boolean value indicating whether the point is inside the area contained by the stroking of the specified path. + abstract isPointInStroke : path:Path2D * x:float * y:float -> bool + + /// + /// Retrieves the current transformation matrix being applied to the context. + /// + /// A DOMMatrix object representing the current transformation matrix. + abstract getTransform : unit -> obj + + /// + /// Adds a rotation to the transformation matrix. + /// + /// + /// The rotation center point is always the canvas origin. To change the center point, you will need to move the canvas by using the translate() method. + /// + /// The rotation angle, clockwise in radians. You can use degree * Math.PI / 180 to calculate a radian from a degree. + abstract rotate : angle:float -> unit + + /// + /// Adds a scaling transformation to the canvas units horizontally and/or vertically. + /// + /// + /// By default, one unit on the canvas is exactly one pixel. A scaling transformation modifies this behavior. For example, a scaling factor of 0.5 results in a unit size of 0.5 pixels, making shapes half the normal size. Similarly, a scaling factor of 2.0 increases the unit size so that one unit becomes two pixels, making shapes twice the normal size. + /// + /// Scaling factor in the horizontal direction. A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling (default). + /// Scaling factor in the vertical direction. A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling (default). + abstract scale : x:float * y:float -> unit + + /// + /// Adds a translation transformation to the current matrix by moving the canvas and its origin. + /// + /// Distance to move in the horizontal direction. Positive values move to the right, and negative values to the left. + /// Distance to move in the vertical direction. Positive values move down, and negative values move up. + abstract translate : x:float * y:float -> unit + + /// + /// Multiplies the current transformation with the matrix described by the given values. + /// + /// + /// This allows you to scale, rotate, translate (move), and skew the context. + /// + /// The cell in the first row and first column of the matrix. + /// The cell in the second row and first column of the matrix. + /// The cell in the first row and second column of the matrix. + /// The cell in the second row and second column of the matrix. + /// The cell in the first row and third column of the matrix. + /// The cell in the second row and third column of the matrix. + abstract transform : a:float * b:float * c:float * d:float * e:float * f:float -> unit + + /// + /// Resets the current transformation to the identity matrix and applies a transformation to the context. + /// + /// + /// This lets you scale, rotate, translate (move), and skew the context. + /// + /// The cell in the first row and first column of the transformation matrix (default: 1.0). + /// The cell in the second row and first column of the transformation matrix (default: 0.0). + /// The cell in the first row and second column of the transformation matrix (default: 0.0). + /// The cell in the second row and second column of the transformation matrix (default: 1.0). + /// The cell in the first row and third column of the transformation matrix (default: 0.0). + /// The cell in the second row and third column of the transformation matrix (default: 0.0). + abstract setTransform : a:float * b:float * c:float * d:float * e:float * f:float -> unit + + /// + /// Resets the current transformation to the identity matrix and applies a transformation to the context. + /// + /// + /// This lets you scale, rotate, translate (move), and skew the context. + /// + /// A record representing the transformation matrix. The record should have fields a, b, c, d, e, and f. Omitted fields default to values (a: 1.0, b: 0.0, c: 0.0, d: 1.0, e: 0.0, f: 0.0). + abstract setTransform : matrix:TransformMatrix -> unit + + /// + /// Resets the current transformation matrix to the identity matrix. + /// + abstract resetTransform : unit -> unit + + /// + /// Gets or sets the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas. + /// + /// + /// A number between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive. Values outside that range, including Infinity and NaN, will not be set, and globalAlpha will retain its previous value. The default value is 1.0. + /// + /// + /// The alpha value for global transparency. It is a number between 0.0 and 1.0. + /// + abstract globalAlpha : float with get, set + + /// + /// Gets or sets the compositing operation to apply when drawing new shapes. + /// + /// + /// This property specifies the compositing or blending mode to use for drawing operations. It determines how new shapes are combined with existing canvas content. + /// + /// + /// A string identifying the compositing or blending mode operation + abstract globalCompositeOperation : GlobalCompositeOperation with get, set + + /// + /// Draws an image onto the canvas using various combinations of source and destination coordinates and dimensions. + /// + /// An element to draw into the context. Permitted types include HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas, or VideoFrame. + /// The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image. + /// The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image. + /// InvalidStateError: Thrown when the image has no image data or if the canvas or source rectangle width or height is zero. + /// TypeMismatchError: Thrown when a null or undefined image is passed as a parameter. + abstract drawImage : image: obj * dx: float * dy: float -> unit + + /// + /// Draws an image onto the canvas using various combinations of source and destination coordinates and dimensions. + /// + /// An element to draw into the context. Permitted types include HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas, or VideoFrame. + /// The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image. + /// The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image. + /// The width to draw the image in the destination canvas. Allows scaling of the drawn image. Not specified in the 3-argument syntax. + /// The height to draw the image in the destination canvas. Allows scaling of the drawn image. Not specified in the 3-argument syntax. + /// InvalidStateError: Thrown when the image has no image data or if the canvas or source rectangle width or height is zero. + /// TypeMismatchError: Thrown when a null or undefined image is passed as a parameter. + abstract drawImage : image: obj * dx: float * dy: float * dWidth: float option * dHeight: float option -> unit + + /// + /// Draws an image onto the canvas using various combinations of source and destination coordinates and dimensions. + /// + /// An element to draw into the context. Permitted types include HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas, or VideoFrame. + /// The x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context. Use the 3- or 5-argument syntax to omit this argument. + /// The y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context. Use the 3- or 5-argument syntax to omit this argument. + /// The width of the sub-rectangle of the source image to draw into the destination context. Use the 3- or 5-argument syntax to omit this argument. A negative value will flip the image. + /// The height of the sub-rectangle of the source image to draw into the destination context. Use the 3- or 5-argument syntax to omit this argument. A negative value will flip the image. + /// The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image. + /// The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image. + /// The width to draw the image in the destination canvas. Allows scaling of the drawn image. Not specified in the 3-argument syntax. + /// The height to draw the image in the destination canvas. Allows scaling of the drawn image. Not specified in the 3-argument syntax. + /// InvalidStateError: Thrown when the image has no image data or if the canvas or source rectangle width or height is zero. + /// TypeMismatchError: Thrown when a null or undefined image is passed as a parameter. + abstract drawImage : image: obj * sx: float * sy: float * sWidth: float option * sHeight: float option * dx: float option * dy: float option * dWidth: float option * dHeight: float option -> unit + + /// + /// Creates a new, blank ImageData object with the specified dimensions. + /// + /// + /// All pixels are transparent black. + /// + /// The width to give the new ImageData object. + /// The height to give the new ImageData object. + /// An object with color space settings. + /// A new ImageData object filled with transparent black pixels. + abstract createImageData : width:int * height:int * ?settings: ImageDataSettings -> ImageData + + /// + /// Creates a new ImageData object from an existing ImageData object. + /// + /// An existing ImageData object from which to copy the width and height. + /// A new ImageData object with the same dimensions and filled with transparent black pixels. + abstract createImageData : imagedata:ImageData -> ImageData + + /// + /// Returns an ImageData object representing the underlying pixel data for a specified portion of the canvas. + /// + /// + /// This method is not affected by the canvas's transformation matrix. If the specified rectangle extends outside the bounds of the canvas, the pixels outside the canvas are transparent black in the returned ImageData object. + /// + /// The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted. + /// The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted. + /// The width of the rectangle from which the ImageData will be extracted. Positive values move to the right, and negative values to the left. + /// The height of the rectangle from which the ImageData will be extracted. Positive values move down, and negative values move up. + /// An optional object with settings properties. + /// An ImageData object containing the image data for the specified canvas rectangle. + /// IndexSizeError: Thrown if either sw or sh are zero. + /// SecurityError: The canvas contains or may contain pixels loaded from an origin other than the document's origin. To avoid a SecurityError, configure CORS to allow cross-origin use of images and canvas. + abstract getImageData : sx:int * sy:int * sw:int * sh:int * ?settings:ImageDataSettings -> ImageData + + /// + /// Paints data from the given ImageData object onto the canvas. + /// + /// + /// If a dirty rectangle is provided, only the pixels from that rectangle are painted. This method is not affected by the canvas transformation matrix. + /// + /// An ImageData object containing the array of pixel values. + /// Horizontal position (x coordinate) at which to place the image data in the destination canvas. + /// Vertical position (y coordinate) at which to place the image data in the destination canvas. + /// Horizontal position (x coordinate) of the top-left corner from which the image data will be extracted. Defaults to 0. + /// Vertical position (y coordinate) of the top-left corner from which the image data will be extracted. Defaults to 0. + /// Width of the rectangle to be painted. Defaults to the width of the image data. + /// Height of the rectangle to be painted. Defaults to the height of the image data. + /// NotSupportedError: Thrown if any of the arguments is infinite. + /// InvalidStateError: Thrown if the ImageData object's data has been detached. + abstract putImageData : imageData:ImageData * dx:float * dy:float * ?dirtyX:float * ?dirtyY:float * ?dirtyWidth:float * ?dirtyHeight:float -> unit + + /// + /// Gets or sets a value that determines whether scaled images are smoothed (true, default) or not (false). + /// + /// + /// On getting this property, the last value it was set to is returned. This property is useful for games and other apps that use pixel art. When enlarging images, the default resizing algorithm will blur the pixels. Set this property to false to retain the pixels' sharpness. + /// + /// + /// A boolean value indicating whether to smooth scaled images or not. The default value is true. + /// + abstract imageSmoothingEnabled : bool with get, set + + /// + /// Gets or sets the quality of image smoothing. + /// + /// + /// Note: For this property to have an effect, imageSmoothingEnabled must be true. + /// + abstract imageSmoothingQuality : ImageSmoothingQualityOptions with get, set + + /// + /// Saves the entire state of the canvas by pushing the current state onto a stack. + /// + /// + /// The drawing state includes the current transformation matrix, clipping region, dash list, and the values of the following attributes: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled. + /// + abstract save : unit -> unit + + /// + /// Restores the most recently saved canvas state by popping the top entry in the drawing state stack. + /// + /// + /// If there is no saved state, this method does nothing. + /// + abstract restore : unit -> unit + + /// + /// Gets a read-only reference to the HTMLCanvasElement object associated with this context. + /// + /// A HTMLCanvasElement object or null if there is no associated <canvas> element. + abstract canvas : HTMLCanvasElement option + + /// + /// Returns an object that contains attributes used by the context. + /// + /// + /// Note that context attributes may be requested when creating the context with HTMLCanvasElement.getContext(), but the attributes that are actually supported and used may differ. + /// + /// A CanvasRenderingContext2DSettings object that contains the actual context parameters. + abstract getContextAttributes : unit -> CanvasRenderingContext2DSettings + + /// + /// Resets the rendering context to its default state, allowing it to be reused for drawing something else without having to explicitly reset all the properties. + /// + /// + /// Resetting clears the backing buffer, drawing state stack, any defined paths, and styles. This includes the current transformation matrix, compositing properties, clipping region, dash list, line styles, text styles, shadows, image smoothing, filters, and more. + /// + abstract reset : unit -> unit + + /// + /// Provides filter effects such as blurring and grayscaling for the rendering context. + /// + /// + /// It is similar to the CSS filter property and accepts the same values. + /// + /// + /// A string representing the filter effect or "none" to clear the filter. + /// + abstract member filter : string with get, set + +namespace Browser + +open Fable.Core +open Browser.Types + +[] +module CanvasRenderingContext2D = + [] + let Path2D: Path2DStatic = jsNative<_> + + type HTMLCanvasElement with + [] + member _.getContext2d(?settings: CanvasRenderingContext2DSettings) = jsNative diff --git a/src/Canvas/Browser.Canvas.fsproj b/src/Canvas/Browser.Canvas.fsproj new file mode 100644 index 0000000..9e11204 --- /dev/null +++ b/src/Canvas/Browser.Canvas.fsproj @@ -0,0 +1,24 @@ + + + + Fable.Browser.Canvas + 1.0.0 + 1.0.0 + netstandard2.0 + true + fable;fable-binding;fable-javascript + + + + + + + + + + + + + diff --git a/src/Canvas/README.md b/src/Canvas/README.md new file mode 100644 index 0000000..76b9bdd --- /dev/null +++ b/src/Canvas/README.md @@ -0,0 +1,3 @@ +# Browser.Canvas + +Includes bindings for the [Canvas API] (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) \ No newline at end of file diff --git a/src/Canvas/RELEASE_NOTES.md b/src/Canvas/RELEASE_NOTES.md new file mode 100644 index 0000000..508702e --- /dev/null +++ b/src/Canvas/RELEASE_NOTES.md @@ -0,0 +1,3 @@ +### 1.0.0 + +* First release \ No newline at end of file